循环显示来自 2 个单独数组的数据 Angular 4

Question

我正在使用 Angular 4 和 Firebase 来存储我的数据。

我从数据库中提取了所有 "Clients" 并将其存储在 "this.clients"。一切都很好，但我无法显示来自 Firebase 的 $key（其他工作正常）。

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

因此，为了获取 $key，我制作了另一个数组和函数，仅使用 snapshotChanges() 而不是 valueChanges() 来获取密钥像这样：

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

这行得通，日志没问题！现在在组件 HTML 上循环时，我可以完美地查看它。

BUT 我需要它在同一个 table 中并且不要重复：有什么办法可以解决吗？这是我目前的 table:

<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>
</table>

它看起来像这样：

希望有人能帮助我！

Answer 1

如果 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>

Answer 2

我认为您只需要迭代一个数组，并在绘制值时将第一个数组的索引映射到第二个数组。请参考以下模板。

<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>

循环显示来自 2 个单独数组的数据 Angular 4

Looping and displaying data from 2 seperate arrays Angular 4

javascript

arrays

loops

ngfor

angular