Цикл и отображение данных из 2 отдельных массивов Angular 4

Question

Я использую Angular 4 & Firebase для хранения своих данных.

Я выбрал всех «Клиентов» из своей базы данных и сохранил их в "this.clients". Все хорошо, но я не могу отобразить ключ $ от Firebase (другие работают нормально).

  ngOnInit() {
      this.clientService.getClients().valueChanges().subscribe(clients => {
          this.clients = clients;
          console.log(this.clients);
      });

Итак, чтобы получить ключ $, я создал другой массив и функцию для получения ключа, используя только snapshotChanges() вместо valueChanges() как это:

         this.clientService.getClientsKey().snapshotChanges().subscribe( clientsKey => {
         this.clientsKey = clientsKey;
  console.log(this.clientsKey);
});

Это работает, и журнал в порядке! Теперь, когда вы зацикливаетесь на компоненте HTML, я могу видеть его отлично.

НО Мне нужно, чтобы он был в одной таблице и не дублировался: Есть ли способ, как я могу это исправить? Это моя текущая таблица:

<table class="table table-striped" *ngIf="clients?.length > 0; else noClients">
<thead class="thead-inverse">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Balance</th>
        <th></th>
    </tr>
</thead>

<tbody>
    <tr *ngFor="let client of clients">
        <td *ngFor="let k of clientsKey">{{ k.key }}</td>
        <td>{{ client.firstName }} {{ client.lastName }}</td>
        <td>{{ client.email }}</td>
        <td>{{ client.balance | currency }}</td>
        <td><a href="" class="btn btn-secondary btn-sm"><i class="fa fa-arrow-circle-o-right"></i> Details</a></td>
    </tr>
</tbody>

И выглядит это так:

Надеюсь, кто-нибудь может мне помочь!

Answer 1

Я думаю, вам просто нужно перебрать только один массив и сопоставить индексы первого массива со вторым при рисовании значений. См. Шаблон ниже.

<table class="table table-striped" *ngIf="clients?.length > 0; else noClients">
         <thead class="thead-inverse">
          <tr>
           <th>ID</th>
           <th>Name</th>
           <th>Email</th>
           <th>Balance</th>
           <th></th>
           </tr>
    </thead>

    <tbody>
        <tr *ngFor="let client of clients; let i = index">
            <td>{{ clientsKey[i].key }}</td>
            <td>{{ client.firstName }} {{ client.lastName }}</td>
            <td>{{ client.email }}</td>
            <td>{{ client.balance | currency }}</td>
            <td><a href="" class="btn btn-secondary btn-sm"><i class="fa fa-arrow-circle-o-right"></i> Details</a></td>
        </tr>
    </tbody>
</table>

Answer 2

Если clients array и clientsKey array имеют одинаковую длину, вы можете сделать это:

<tbody>
    <tr *ngFor="let client of clients; let index = index">
        <td>{{ clientsKey[index].key }}</td>
        <td>{{ client.firstName }} {{ client.lastName }}</td>
        <td>{{ client.email }}</td>
        <td>{{ client.balance | currency }}</td>
        <td><a href="" class="btn btn-secondary btn-sm"><i class="fa fa-arrow-circle-o-right"></i> Details</a></td>
    </tr>
</tbody>