2017-08-21 2 views
2

Ich versuche eine sehr grundlegende ng-repeat Direktive für ein Ionic 3 Projekt mit Angular 4 zu implementieren. Ich verstehe einfach nicht, warum dieser Code nichts zurückgibt. Ich schätze die zahlreichen ionischen und eckigen Dokumentationen verwirren mich .... Irgendeine Idee?Angular 4 ng-repeat implementation

home.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

public item = {} ; 
public itemsList = [ 
    {"name":"Mark", "position":"CEO"}, 
    {"name":"David", "position":"Developer"} 
]; 

    constructor(public navCtrl: NavController) { 

    } 

} 

home.html

<ion-content padding> 
    <ion-list> 
     <ion-item ng-repeat="item of itemsList"> 
     <h3> name: {{item.name}}</h3> 
     <p> position: {{item.position}}</p> 
     </ion-item> 
    </ion-list> 
</ion-content> 
+3

Sie haben vergessen, "lass uns in ng-repeat die sollte durch * ngFor – Vega

Antwort

3
<ion-content padding> 
    <ion-list> 
     <ion-item *ngFor="let item of itemsList"> 
     <h3> name: {{item.name}}</h3> 
     <h3> name: {{item.position}}</h3> 
     </ion-item> 
    </ion-list> 
</ion-content> 

Arbeitscode ist https://gitlab.com/ugur.ayan/temp-ionic/

+0

If es ist ein Angular 2-4 Projekt –

+0

Dank Dr. Geek, aber ich glaube, dass Ionic 3 Angular 4 verwendet. Wenn Sie * ngFor verwenden, gibt die Konsole einen Fehler wie "Kann nicht an 'ngFor binden, da es nicht ein ist bekannte Eigenschaft von 'ion-item' " – Bertrand

+0

Es funktioniert gut. Ich erstelle eine Arbeitsversion für Sie https://gitlab.com/ugur.ayan/temp-ionic/ und >> ts-Code ist https://gitlab.com/ugur.ayan/temp-ionic/blob/master/ src/pages/home/home.ts >> html code ist der gleiche –