Question

我尝试使用以下代码创建Accordion。但是我收到了错误。

但如果我评论subCategory（下面）html代码我没有看到问题。

.element-to-prefix:before {
  content: '@';
}

HTML手风琴：

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

组件：

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

错误： 未处理的Promise拒绝：模板解析错误：在一个元素上不能有多个模板绑定。只使用一个名为＆＃39; template＆＃39;或以*（＆＃34; ory.Description}}

为前缀

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;
};

在一个元素上不能有多个模板绑定。只使用一个名为＆＃39; template＆＃39;或以*（＆＃34; 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:

在一个元素上不能有多个模板绑定。只使用一个名为＆＃39; template＆＃39;或以*（＆＃34; 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:

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

中找到更多信息

Ionic 2手风琴无效

1 个答案: