Angular 爱奥尼亚2号手风琴坏了

我正在尝试使用下面的代码创建手风琴。但我犯了个错误

但若我评论子类别（如下）html代码，我并没有看到这个问题

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

错误：

---

未处理的承诺拒绝：模板分析错误： 一个元素上不能有多个模板绑定。仅使用一个名为“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:

      <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:

      <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

]*ngIf=“IsGroupShowed（i）”>
您不能在同一元素中使用
*ngfor
和
*ngIf
。相反，您可以使用ng模板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>
<!-- ... -->


{subCategory.Description}}未处理的承诺拒绝：模板分析错误：“let-”仅在模板元素上受支持。（{category.Description}}]let subCategory[ngForOf]=“category.ProductSubCategory”>
      <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

<!-- ... -->
<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>
<!-- ... -->