Template Error on ngFor and using pipe with parameter

Question

I'm trying to sorting with pipe on Angular 4. There is no problem with pipe and ngFor.

 <div *ngFor="let item of data | paginate: { itemsPerPage: 8, currentPage: p } |  orderBy : ['{{config}}'] " class="col-lg-3 col-md-6 col-sm-6">
            <blog-thumb [date]="item.date" [commentCount]="item.commentCount"> </blog-thumb>
        </div>

Like above there is 2 pipe that developed by myself. With that syntax there is error. If I change to this, there is no problem

And this is my component class.

export class MainBlogPageComponent implements OnInit {

    public sortOrder: string = "asc";
    public config: string = "-commentCount";

    private data: any;
    private blogPosts: string;
    constructor() {       
     }
    ngOnInit() { }
}

Also on all my modules CommonModule imported, also BrowserModule imported at App.Module.ts as well

This is the exception that see on chrome browser.

Can't bind to '*ngFor' since it isn't a known property of 'div'. ("
            </div>
        </div>
        <div [ERROR ->]*ngFor="let item of data | paginate: { itemsPerPage: 8, currentPage: p } |  orderBy : ['{{config}}'] "): ng:///MainBlogModule/MainBlogPageComponent.html@37:13
Error: Template parse errors:
Can't bind to '*ngFor' since it isn't a known property of 'div'. ("
            </div>
        </div>
        <div [ERROR ->]*ngFor="let item of data | paginate: { itemsPerPage: 8, currentPage: p } |  orderBy : ['{{config}}'] "):

Its not like the other exception like template parsing error. I didn't get it where is the problem.

This is my module that MainBlogPageComponent imported.

@NgModule({
    imports: [CommonModule,
    FormsModule,
    NgaModule,
    routing,
    NgxPaginationModule
    ],
    exports: [],
    declarations: [MainBlogComponent,
    MainBlogPageComponent,
    SubHeaderComponent,
    BlogThumbComponent],
    providers: [],
})
export class MainBlogModule { }

Pipes at my shared module, all my pipes lives in the shared module and shared module just fine. I used another module with no problem.

Can you add `@NgModule` configuration where `MainBlogPageComponent` is defined? — yurzui, May 07 '17 at 13:22
As i said like on question, when i changed to static parameter like '+commentCount' its just fine. I just want to work with parameter. — orhun.begendi, May 07 '17 at 13:29

score 2 · Accepted Answer · answered May 07 '17 at 13:33

2

I think i should be

orderBy : [config]

this way in your OrderBy pipe you will get ["-commentCount"] parameter

answered May 07 '17 at 13:33

yurzui

205,937
32
433
399

its just fine, but I don't get it. Don't I use with "{{ }}" to bind ? I saw on tutorial on angular.io – orhun.begendi May 07 '17 at 13:39
1

You shouldn't use interpolation together with `[]` `*ngFor` is syntax sugar for `[ngForOf]` `[...]` interprets the value as expression. – yurzui May 07 '17 at 13:41

Template Error on ngFor and using pipe with parameter

1 Answers1