nativescript - 在 NativeScript + Angula2 应用程序中使用 ngFor

Question

我正在尝试使用 ngFor 显示标签列表。
BELTS 是一种简单的数据结构。其中的每个项目都有一个主题。

我收到一个错误:
JS:错误:./SilabusComponent 类 SilabusComponent 中的错误 - 内联模板:2:64 由以下原因引起:
无法读取未定义的属性“主题”。

似乎它不知道项目。任何的想法？

以下是组件装饰器:

@Component({
   selector: "kbm-silabus",
   template: `
      <StackLayout>
        <Label ngFor="let item of silabusList; let i=index"                    [text]="item.subject"></Label> 
    </StackLayout>
   `
})

export class SilabusComponent {
    private sub: any;
    silabusList: Array<Silabus>;

    ngOnInit() {
      this.page.actionBar.title = "KBM School";
      this.sub = this.route.params.subscribe(params => {
        this.id = params['id'];
        this.silabusList = [];
        this.silabusSubjects = [];

        BELTS[this.id].silabus.forEach((item, index) => {
            this.silabusList.push(new Silabus(item.subject, item.content));
            console.log(item.subject);
        })
      });
    }

    ngOnDestroy() {
      this.sub.unsubscribe();
    }

}

Answer 1

您已经错过了 ngFor 前面的星号叹息，这非常重要，否则您只能将 ngFor 应用于具有完整语法的模板。在 NativeScript 项目中使用 *ngFor 句法。

例如

<StackLayout *ngFor="let item of silabusList">
   <Label [text]="item.subject"></Label> 
</StackLayout>

基本上，这是如何使用不同的语法规则实现相同的输出:

<!-- Examples (A) and (B) are the same -->

<!-- (A) *ngFor -->
<Label *ngFor="let hero of heroes" [text]="hero"></Label >

<!-- (B) ngFor with template -->
<template ngFor let-hero [ngForOf]="heroes">
  <Label [text]="hero"></Label >
</template>