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

【问题标题】：Looping and displaying data from 2 seperate arrays Angular 4循环和显示来自 2 个单独数组 Angular 4 的数据
【发布时间】：2018-12-07 20:53:48
【问题描述】：

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

我从我的数据库中获取了所有“客户”并将其存储在 “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 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>

它看起来像这样：

希望有人可以帮助我！

【问题讨论】：

标签： javascript arrays angular loops ngfor

【解决方案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>

【讨论】：

仔细听我说，你是个天才。非常感谢你这么棒！！！你是最棒的！
@AvivDay 哈哈！谢谢 :) 另外，如果它解决了您的问题，请接受答案。
做到了。谢谢！

【解决方案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>

【讨论】：