javascript - 如何在 angular2 或 Ionic 中应用 *ngFor

Question

我正在从事 Ionic 项目。单击按钮时，将处理请求并接收数据，如下所示:

   public login() {
    //this.showLoading()
    var test33;
    this.auth.login(this.registerCredentials).subscribe(data => {
      console.log(data["_body"])
      test33 = data["_body"]
      console.log(test33)
    },
      error => {
        this.showError(error);
      });
  }

查看中:

 <ion-row class="logo-row">
        <ion-col></ion-col>
        <h2  *ngFor="let user0 of test33">{{ user0.name }}</h2>
        <ion-col width-67>
          <img src="http://placehold.it/300x200"/>
        </ion-col>
        <ion-col></ion-col>
      </ion-row>`

在控制台上，我接收 test33 变量中的数据:

 [{"id":1,"role_id":1,"name":"Dr. Admin","email":"admin@admin.com","avatar":"\/user\/1\/profile\/HR1-dummy-avater.png","password":"$2y$10$iEpnh6pJ09rxH5NFFCVzaewBCxC\/FHZuHnkWA6qUrOBO3tYIBbsVC","remember_token":"VgwXUdIpL6EqW7Fp66VGRPjSKE727Inc4MTseJQq84cTCglkS335KCqVnavu","created_at":"2017-05-25 22:46:10","updated_at":"2017-06-14 05:19:52","is_feature":null}]

但是{{user0.name}}没有返回名称。

请指出我哪里有错误。

Answer 1

您使用 test33 作为变量而不是属性，这意味着 ngFor 无法在组件的属性上查找 test33。

所以你要做的就是将 test33 声明为属性 this.test33; 然后 ngFor 就会知道该属性。

牢记 如果您想在模板上使用代码中的变量，则必须将它们声明为组件属性。

希望这对您有帮助。

编辑:

import { Component } from '@angular/core';

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

  test33;
  andAnyPropYouWantHere;

  constructor() {}

}

然后，您在那里声明的所有 Prop 都可以在模板上与 ngFor、ngIf 等一起使用:)