Не удается найти другой поддерживающий объект '[object Object]' типа 'object'.NgFor поддерживает только привязку к Iterables, таким как массивы. (AngularFireList)

Question

Я пытался получить данные из базы данных Firebase как в этом учебном пособии , но я получаю эту ошибку;

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.(AngularFireList)

Я хочу получить определенные данные для текущего пользователя (когда пользователь входит вприложение)

может кто-нибудь помочь мне решить эту проблему

эта HTML-страница

<ion-content padding>
  <!--  مسسوول عن عرض البيانات  -->
  <ul *ngFor ="let d of datanote " class="collection" class="colorul" text-right >
    <li class= "collection-item" >
      <ion-card class="backgounddiv" >     
        <ion-card-header>
          <strong class="colorli" >{{d.title}}<br></strong>
        </ion-card-header>
        <ion-card-content>
          <strong class="colorli" >{{d.desciption}}</strong>
        </ion-card-content>   
      </ion-card>
    </li>
  </ul>
</ion-content>

эта страница

export class HomePage {
  datanote :AngularFireList<users[]> ;
  userId: string;

  constructor(
    public navCtrl: NavController,
    private ev: Events,
    public firestoreService:FierbaceserverProvider,
    public navParams: NavParams, 
    private afAuth: AngularFireAuth,
    private db: AngularFireDatabase 
  ) {  }

  ngOnInit():AngularFireList <users[]> {
    if (this.userId) return;

    this.datanote=this.db.list(`note-list/${this.userId}`);

    return this.datanote; 
  }
}

Answer 1

this.datanote является ссылкой на данный момент, она не содержит значений базы данных, чтобы получить эти значения, вам нужно дождаться наблюдаемого.

private noteList$: Subscription;

ngOnInit() {
  if (this.userId) return;

  this.noteList$ = this.db.list(`note-list/${this.userId}`)
    .snapshotChanges()
    .subscribe(snapshot => {
      this.datanote = snapshot;
    });
}

ngOnDestroy() {
  noteList$.unsubscribe();
}

Затем вы должны обновить свойHTML, чтобы проверить, существует ли this.datanote с ngIf="datanote" на ion-content.

<ion-content *ngIf="datanote" padding>
  <!--  مسسوول عن عرض البيانات  -->
  <ul *ngFor ="let d of datanote " class="collection" class="colorul" text-right >
    <li class= "collection-item" >
      <ion-card class="backgounddiv" >     
        <ion-card-header>
          <strong class="colorli" >{{d.title}}<br></strong>
        </ion-card-header>
        <ion-card-content>
          <strong class="colorli" >{{d.desciption}}</strong>
        </ion-card-content>   
      </ion-card>
    </li>
  </ul>
</ion-content>