如何在 angular2 或 Ionic 中应用 *ngFor

Question

我正在从事离子项目。单击按钮后，将处理请求并接收数据，如下所示：

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

在控制台 I 上，将 test33 变量中的数据接收为：

 [{"id":1,"role_id":1,"name":"Dr. Admin","email":"[e-mail]","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() {}
}

然后，您在那里声明的所有道具都可以在模板上使用ngFor，ngIf和其他许多:)

Answer 2

问题是test33是局部变量，而不是组件的属性，因此视图无法访问其值。

若要修复它，请将test33声明为组件的属性

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    public test33: any;
    //...
}

然后使用 this.test33 在 login() 方法中设置其值：

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

现在它应该按预期显示在视图中。