Question

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

}

Answer 1

你已经错过了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>

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

1 个答案: