Verwenden von ngFor in NativeScript + Angula2-Anwendung

Question

Ich versuche, eine Liste von Etiketten mit ngFor anzuzeigen. BELTS ist eine einfache Datenstruktur. Jeder Gegenstand enthält ein Thema.

Ich erhalte eine Fehlermeldung: JS: Fehler: Fehler in ./SilabusComponent Klasse SilabusComponent - Inline-Vorlage: 2: 64, verursacht durch: Kann nicht Eigentum 'Subjekt' undefinierten lesen.

scheint, dass es Artikel nicht kennt. irgendeine Idee?

finden Sie die Komponente 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

Sie haben den asterix Seufzer vor ngFor verpasst, die als sonst sehr wichtig ist, können Sie nur ngFor für Vorlagen mit voller Syntax anzuwenden. Verwenden Sie in NativeScript-Projekten die Syntax * ngFor.

z.B.

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

Im Grunde ist dies, wie die gleiche Leistung mit den verschiedenen Syntaxregeln achive:

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