ngFor 上的模板错误和使用带参数的管道

Question

我正在尝试在 Angular 4 上使用管道进行排序。管道和 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>

像上面有2个自己开发的pipe。使用该语法存在错误。我改成这样就没问题了

这是我的组件 class。

export class MainBlogPageComponent implements OnInit {

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

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

我所有的模块 CommonModule 都导入了，BrowserModule 也导入了 App.Module.ts

这是在 chrome 浏览器上看到的异常。

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}}'] "):

它不像其他异常，如模板解析错误。没看懂哪里有问题。

这是我 MainBlogPageComponent 导入的模块。

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

管道在我的共享模块中，我所有的管道都在共享模块和共享模块中。我用了另一个模块没有问题。

Answer 1

我想我应该

orderBy : [config]

这样在你的 OrderBy 管道中你会得到 ["-commentCount"] 参数

ngFor 上的模板错误和使用带参数的管道

Template Error on ngFor and using pipe with parameter

angular2-directives

angular2-pipe

angular