在 NativeScript + Angula2 应用程序中使用 ngFor答案

【问题标题】：Using ngFor in NativeScript + Angula2 application在 NativeScript + Angula2 应用程序中使用 ngFor
【发布时间】：2016-10-10 08:17:10
【问题描述】：

我正在尝试使用 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();
    }

}

【问题讨论】：

在这个 repo - github.com/NativeScript/nativescript-sdk-examples-ng/tree/… 你可以找到示例，如何在 NativeScript Angular2 项目中使用 ngFor 指令

标签： nativescript

【解决方案1】：

您错过了 ngFor 前面的 asterix 叹息，这非常重要，否则您只能将 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>

【讨论】：