2017-08-21 7 views
2

Angular 4を使用してIonic 3プロジェクト用の非常に基本的なng-repeat指令を実装しようとしています。なぜこのコードが何故returnigでないのか分かりません。私は、多くのイオンと角度のドキュメントが私を混乱させていると思います... アイデア?Angular 4 ng-repeatの実装

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

あなたはNGリピートに忘れてしまった 'せ' であるべきことで* ngの場合 – Vega

答えて

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> 

の作業コードがhttps://gitlab.com/ugur.ayan/temp-ionic/

+0

それはAngular 2-4プロジェクトです –

+0

Geekさんありがとうございますが、Ionic 3はAngular 4を使用していると思います。 * ngForを使用すると、コンソールは「ngForにバインドできません。 'イオンアイテム'の既知の特性 " – Bertrand

+0

うまくいきます。 https://gitlab.com/ugur.ayan/tempionic/と >> ts codeはhttps://gitlab.com/ugur.ayan/tempionic/blob/master/です。 src/pages/home/home.ts >> htmlコードは同じ –

関連する問題