AngularFire - Как отобразить ключ и значение Firestore в запросе коллекции - PullRequest
0 голосов
/ 27 февраля 2019

Я использую стандартный запрос коллекции AngularFire.Однако требование проекта диктует, что вместо явного связывания узлов и значений пожарного хранилища непосредственно в HTML (как показано в первом фрагменте HTML ниже) мы вместо этого связываем возвращаемый ключ и значение, чтобы при добавлении каких-либо новых полей в Firestore,Мне не нужно обновлять свой проект для отображения этих элементов.

Есть ли способ, с помощью стандартного запроса AngularFire, связать ключ и значение каждого возвращаемого результата в HTML?

user.component.ts

  getUsers(){
    this.usersCollection = this.afs.collection<User>('users');
    this.users = this.usersCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as User;
        const id = a.payload.doc.id;  
        return { id, ...data };
      }))
    );
  }

HTML

<ul>
    <li *ngFor="let user of users | async">
        <div>{{ user.name }}</div>
        <div>{{ user.dob }}</div>
        <div>{{ user.id }}</div>
    </li>
</ul>

Желаемый результат

<ul>
    <li *ngFor="">
        <div>{{key}} / {{ value }}</div>
    </li>
</ul>

1 Ответ

0 голосов
/ 27 февраля 2019

Существует труба под названием | keyvalue (угловой 6+).Итак, что вы можете сделать:

<ul>
    <li *ngFor="let user of users | async">
        <div *ngFor="let userinfo of user | keyvalue">
          {{ userinfo.key}}: {{userinfo.value}}
        </div>
    </li>
</ul>
...