Не удается найти другой объект поддержки.NgFor поддерживает только привязку к итерациям, таким как массивы

Question

Я случайно где-то изменил какой-то код, и теперь мои сообщения больше не просматриваются, кто-нибудь может обнаружить ошибку?

Услуги:

  posts: AngularFirestoreCollection<any[]>;

  constructor(private db: AngularFirestore) { }

  getPosts() {
    this.posts = this.db.collection('/posts') as AngularFirestoreCollection<any[]>;
    return this.posts;
  }
}

Почтовый компонент:

  posts: AngularFirestoreCollection<any>;

  constructor(private firebaseService: FirebaseService) { }

  ngOnInit() {
    this.posts = this.firebaseService.getPosts();
  }

}

Разместить HTML:

  <mat-grid-tile *ngFor="let post of posts">
      <mat-card class="mat-elevation-z4">
          <img mat-card-image src="{{post.imgUrl}}">
          <mat-card-actions>
              <button mat-icon-button><mat-icon>thumb_up_alt</mat-icon></button><span class="counter mat-small">{{post.numberOfLikes}}</span>
              <button mat-icon-button><mat-icon>star</mat-icon></button><span mat-small class="counter mat-small">{{post.numberOfSaves}}</span>
          </mat-card-actions>
      </mat-card>
  </mat-grid-tile>
</mat-grid-list>``

Теперь я получаю Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Answer 1

Вот несколько советов, чтобы решить вашу проблему:

1. AngularFirestoreCollection должен быть передан тип элемента вашей коллекции, здесь вам тип массива (any[]), но что-то вроде Post было бы более уместно.
2. Вы должны позвонить valueChanges() или snapshotChanges() в свою коллекцию, чтобы получить наблюдаемый результат.this.db.collection('/posts') возвращает только ссылку на коллекцию (объект для управления им), а не сам список.
3. Затем используйте конвейер async в шаблоне для автоматической подписки / отмены подписки на возвращаемую наблюдаемую информацию.

В вашем сервисе:

export interface Post {
  imgUrl: string;
  numberOfLikes: number;
  numberOfSaves: number;
}

@Injectable()
export class FirebaseService {
  postsRef: AngularFirestoreCollection<Post>;

  constructor(private db: AngularFirestore) { }

  getPosts() {
    this.postsRef = this.db.collection('/posts') as AngularFirestoreCollection<Post>;
    return this.postsRef.valueChanges();
  }
}

В вашем компоненте:

import { Observable } from 'rxjs';
import { FirebaseService, Post } from '....';

@Component({ ... })
export class MyComponent implements OnInit {
  posts$: Observable<Post[]>;

  constructor(private firebaseService: FirebaseService) { }

  ngOnInit() {
    this.posts$ = this.firebaseService.getPosts();
  }
}

В вашем шаблоне:

<mat-grid-tile *ngFor="let post of posts$ | async">
  ...
</mat-grid-list>