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

时间:2016-10-10 08:17:11

标签: nativescript

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

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

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

以下是组件decoretor:

@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();
    }

}

1 个答案:

答案 0 :(得分:3)

你已经错过了ngFor前面的asterix叹息,这非常重要,否则你只能使用完整语法的ngFor for templates。在NativeScript中,使用 * ngFor 语法。

e.g。

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