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>

我的密码：

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

无法使用* ngFor列出项目

1 个答案: