Question

我正在尝试使用Angular 4为Ionic 3项目实现一个非常基本的ng-repeat指令。我只是不明白为什么这段代码不会返回任何东西。我想很多Ionic和Angular文档让我感到困惑.... 有什么想法吗？

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>

Answer 1

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

角度4 ng重复实施

1 个答案: