Angular：为ngFor循环中的每个项目获取独立数据答案

【问题标题】：Angular: getting independent data for each item in ngFor loopAngular：为ngFor循环中的每个项目获取独立数据
【发布时间】：2018-05-22 14:02:16
【问题描述】：

我是 Angular2+ 的新手，正在测试一些 UI。为此，我想在一组通过ngFor 添加的容器中放置一个随机数：

<div class="table-row" *ngFor="let row of [0,1,2,3,4,5,6]">
  <div class="table-cell">{{fakeData()}}</div>
  <div class="table-cell">{{fakeData()}}</div>
  <div class="table-cell">{{fakeData()}}</div>
  <div class="table-cell">{{fakeData()}}</div>
</div>

这基本上会产生 6 行 4 列，应该包含一个临时编号。

当我使用fakeData = Math.floor(Math.random() * Math.floor(300)); 时，它为每个单元格生成相同的数字。当我把它作为一个函数（如上）时，每个单元格中的数字都不同，但它们会不断变化。显然，当我开始在此处提取和放置真实数据时，获取每行/单元格上的数据会派上用场。

【问题讨论】：

fakeData 是函数还是变量？因为根据您的表格，它是函数，但根据您的 fakeData 代码是一个变量。
我只是措辞奇怪。我首先使用了一个变量，并为每个变量获得了相同的数字（我明白为什么），第二个变量是一个函数。

标签： angular ngfor

【解决方案1】：

当您直接从模板调用函数时，它会在每一帧中调用。所以你的函数 fakeData() 正在通过每帧给你新的随机数来完成它的工作

我不知道你为什么要为每个单元格设置一个随机数，但有用的是 *ngFor 的索引

<div class="table-row" *ngFor="let row of [0,1,2,3,4,5,6]; index as i">
  <div class="table-cell">{{100*i + 1}}</div>
  <div class="table-cell">{{100*i + 2}}</div>
  <div class="table-cell">{{100*i + 3}}</div>
  <div class="table-cell">{{100*i + 4}}</div>
</div>

这会给你这样的东西（下）。因为 i (index) 是你当前正在运行的循环的索引

1 2 3 4 101 102 103 104 201 202 203 204 等

【讨论】：

这是有道理的。那么，我该如何在ngFor 中的每个单元格中放置一个随机数，同时又要避免这种情况呢？

【解决方案2】：

为什么不使用对象数组？您的数据可能最终会成为一个。

myData = [
          {key1: 'val1', key2: 'val2', key3: 'val3', key4: 'val4'},
          {key1: 'val1', key2: 'val2', key3: 'val3', key4: 'val4'}
         ];

<div class="table-row" *ngFor="let obj of myData">
  <div class="table-cell">{{obj.key1}}</div>
  <div class="table-cell">{{obj.key2}}</div>
  <div class="table-cell">{{obj.key3}}</div>
  <div class="table-cell">{{obj.key4}}</div>
</div>

【讨论】：

我想过这样做，但最终硬编码的“测试”数据会非常大，所以我试图减少工作量，这样我就可以使用 ngFor 生成 50 行，每行 100 个单元格，而无需创建一个对象来填充它。
您可以在组件中构建对象，将您的函数包装在一个可观察对象中，并使用异步管道在生成所有值后显示结果。
@Stanislasdrg 生成一堆数字不是异步操作。没有理由使用异步管道或可观察对象。
@DavidWalschots 是的。这只是一个建议，考虑到数据可能最终会从 API 中提取。

【解决方案3】：

原因是 Angular 在识别更改时会不断更新页面。

要解决您的问题，您可以将数据填充到 ts 中的数组（可能是二维数组，具体取决于您的需要），然后在 html 中调用 ngFor。

【讨论】：

【解决方案4】：

我让它通过以下方式工作：

在您的 html 中：

   <div class="table-row" *ngFor="let row of [0,1,2,3,4,5,6]">
        <div class="table-cell">{{fakeData()}}</div>
      </div>

在您的 .ts 文件中：

 fakeData() {
    return  Math.floor(Math.random() * Math.floor(300));
  }

【讨论】：

我就是这样做的，它一遍又一遍地改变数字。
@dcp3450 我想我错过了理解你的问题，所以你希望随机数以某种方式存储，并且在生成随机数之后总是有那个数字？
正确。不过，这都是测试数据，只是为了让我的 UI 到位。我需要它是随机的，所以宽度会发生变化，我不会在我的 UI 中假设任何内容。
@dcp3450 你能做到吗？我正在尝试做完全相同的事情