无法使用 *ngFor 列出项目

Question

我想为我的应用制作一个简单的添加好友和好友请求页面。我正在使用 angularjs 、 angularfire2 和 ionic 3。

    <ion-list>

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

    <button ion-button  item-end>Accept</button>
    <button ion-button  item-end>Decline</button>
  </ion-item>

</ion-list>

我的 ts 代码：

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);
  });

}

我得到这样的控制台输出：

so its working

错误是：

   ERROR Error: Uncaught (in promise): Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

我的数据：

 "users" : {
"3YG0aYta1AP28COa7hdopwvICt63" : {
  "friendrequests" : {
    "test2" : "7LXXTyAH9MeKyqRBg3oP7b2Juox2",
    "test4" : "BaKWaeGrTzXHe4EQ60gpWYOoxKD2",
    "test6" : "nNl6pa0s7ZXULV0yFSIV4dLP0s13"

我听不懂它在说什么。我做错了什么？我可以像我想要的那样以数组形式订阅数据，但不能用 *ngfor 列出它，请帮助我，谢谢。

Answer 1

我不知道您是如何从 firebase 构建数据的，但好友请求不是数组，因此 Angular 无法对其进行迭代。

您可以通过将数据重组为：

"users" : {
"3YG0aYta1AP28COa7hdopwvICt63" : {
  "friendrequests" : [ 
   { "test1" : "7LXXTyAH9MeKyqRBg3oP7b2Juox2" },
   { "test2" : "7LXXTyAH9MeKyqRBg3oP7b2Juox2" },
]

然后您可以从模板中执行循环，但不要忘记像这样正确地下一个响应值：

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

    this.friendRequestArray = data.this.myuid.friendrequests;
    console.log(this.friendRequestArray);
  });