如何使用 *ngFor 列出特定数据

Question

大家好，我正在尝试使用 ionic3 和 firebase 制作一个简单的好友请求页面

我用 ngfor 成功列出了用户名。但我无法从我的数据中列出用户 FirstName。

列表html:

 <ion-item *ngFor="let friendrequest of friendRequestArray; let name of requesterName; let i = index" (click)="getFirstName(i)">
    <h2>{{friendrequest.$key}}</h2>
    <p> {{name}} </p>
  </ion-item>

构造函数：

  friendRequestArray = [];
  requesterName =[];

  constructor(public navCtrl: NavController, public navParams: NavParams,
    public alertCtrl: AlertController, private afDatabase: AngularFireDatabase, private afAuth: AngularFireAuth) {

      this.myUid = this.afAuth.auth.currentUser.uid;

      this.afDatabase.list(`users/${this.myUid}/friendrequests/`).subscribe(data => {
        this.friendRequestArray = data;
        console.log(this.friendRequestArray);



      });


  }

现在，用户名 (friendrequest) 工作正常，但 {{name}} 由于特定 parents 而无法工作。如您所见，有一个通过单击获取名字的功能，它工作正常并且 returns 我在控制台中使用我想要的用户名。但我希望在每个请求的构造函数中使用它，例如用户名。

获取名字函数是这样的，它在构造函数中不起作用；

      getFirstName(i) {

    this.afDatabase.object(`users/${this.friendRequestArray[i].$value}/profile`).subscribe(data => {

        this.requesterName = data.firstName;
        console.log(this.requesterName);
    });
  }

感谢阅读，请多多支持

Answer 1

为什么不在构造函数中调用它？

this.afDatabase.list(`users/${this.myUid}/friendrequests/`).subscribe(data =>{
    this.friendRequestArray = data;
    console.log(this.friendRequestArray);

    this.friendRequestArray.forEach((item, i) => {
       getFirstName(i);
    })


  });

在您的 getFirstName 函数中添加一行以将 firstName 存储在 friendRequestArray 中：

getFirstName(i) {

this.afDatabase.object(`users/${this.friendRequestArray[i].$value}/profile`).subscribe(data => {

    this.requesterName = data.firstName;
    console.log(this.requesterName);
    friendRequestArray[i]["firstName"] = data.firstName;
});

}

现在你的html，可以是：

<ion-item *ngFor="let friendrequest of friendRequestArray; let i = index">
    <h2>{{friendrequest.$key}}</h2>
    <p> {{friendrequest.firstName}} </p>
  </ion-item>

如何使用 *ngFor 列出特定数据

How to list a specific data with *ngFor

firebase

typescript

ionic-framework

angularfire2

ionic3