angular - Ionic 2 Accordion 无法工作

Question

我正在尝试使用下面的代码创建 Accordion 。但我收到错误。

但是如果我评论 subCategory(下面)html 代码，我不会看到问题。

<ion-item *ngFor="let subCategory of category.ProductSubCategory" *ngIf="isGroupShown(i)">
        <a (click)="callProductDetails(subCategory.Product_SubCategory_Id)">{{subCategory.Description}}</a>
      </ion-item>

HTML Accordion :

  <ion-list *ngIf="categories.length > 0">
    <ion-item *ngFor="let category of categories; let i=index" text-wrap (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}">
      <h3>{{category.Description}}</h3>
      <ion-item *ngFor="let subCategory of category.ProductSubCategory" *ngIf="isGroupShown(i)">
        <a (click)="callProductDetails(subCategory.Product_SubCategory_Id)">{{subCategory.Description}}</a>
      </ion-item>
    </ion-item>
  </ion-list>

组件:

constructor(public navCtrl: NavController, public loadingCtrl: LoadingController, public service: Service) {

    this.loading.present();
    this.service.getCategoryData(this.id).subscribe(
        data => {
            this.service.getCategories()
                .then(result => {
                    this.categories = result;
                    this.loading.dismiss();
                });
        },
        err => console.error(err)
    );
}


toggleGroup(group) {
    if (this.isGroupShown(group)) {
        this.shownGroup = null;
    } else {
        this.shownGroup = group;
    }
};
isGroupShown(group) {
    return this.shownGroup === group;
};

错误: 未处理的 Promise 拒绝:模板解析错误: 一个元素上不能有多个模板绑定(bind)。仅使用一个名为“template”或以 * 为前缀的属性(“ory.Description}}

      <ion-item *ngFor="let subCategory of category.ProductSubCategory" [ERROR ->]*ngIf="isGroupShown(i)">

        <a (click)="callProductDetails(subCategory.Product_SubCategory_"): ng:///AppModule/HomePage.html@100:76 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:

一个元素上不能有多个模板绑定(bind)。仅使用一个名为“template”或以 * 为前缀的属性(“ory.Description}}

      <ion-item *ngFor="let subCategory of category.ProductSubCategory" [ERROR ->]*ngIf="isGroupShown(i)">

        <a (click)="callProductDetails(subCategory.Product_SubCategory_"): ng:///AppModule/HomePage.html@100:76
at syntaxError (compiler.es5.js:1540)
at TemplateParser.parse (compiler.es5.js:12031)
at JitCompiler._compileTemplate (compiler.es5.js:25782)
at compiler.es5.js:25706
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.es5.js:25706)
at createResult (compiler.es5.js:25591)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3 Error: Template parse errors:

一个元素上不能有多个模板绑定(bind)。仅使用一个名为“template”或以 * 为前缀的属性(“ory.Description}}

      <ion-item *ngFor="let subCategory of category.ProductSubCategory" [ERROR ->]*ngIf="isGroupShown(i)">

        <a (click)="callProductDetails(subCategory.Product_SubCategory_"): ng:///AppModule/HomePage.html@100:76
at syntaxError (http://localhost:4400/build/vendor.js:85381:34)
at TemplateParser.parse (http://localhost:4400/build/vendor.js:95872:19)
at JitCompiler._compileTemplate (http://localhost:4400/build/vendor.js:109623:39)
at http://localhost:4400/build/vendor.js:109547:62
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (http://localhost:4400/build/vendor.js:109547:19)
at createResult (http://localhost:4400/build/vendor.js:109432:19)
at t.invoke (http://localhost:4400/build/polyfills.js:3:8971)
at r.run (http://localhost:4400/build/polyfills.js:3:4140)
at http://localhost:4400/build/polyfills.js:3:13731

Answer 1

您不能在同一元素中使用 *ngfor 和 *ngIf。相反，您可以使用ng-template sintax，如下所示:

<!-- ... -->
<ng-template ngFor let-subCategory [ngForOf]="category.ProductSubCategory">
    <ion-item *ngIf="isGroupShown(i)">
        <a (click)="callProductDetails(subCategory.Product_SubCategory_Id)">{{subCategory.Description}}</a>
    </ion-item>
</ng-template>
<!-- ... -->

ng-template 元素不会被渲染，只是包含与 *ngFor 相关的逻辑。

您可以在Angular docs中找到更多信息