Angular 角度：获取ngFor循环中每个项目的独立数据

我刚接触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>

{{fakeData（）}}
{{fakeData（）}}
{{fakeData（）}}
{{fakeData（）}}

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

---

当我使用

fakeData=Math.floor（Math.random（）*Math.floor（300））它为每个单元格生成相同的编号。当我把它作为一个函数（如上所述）时，每个单元格中的数字是不同的，但它们不断变化。显然，当我开始在这里提取和放置真实数据时，获取每行/单元格的数据会很方便。
当您直接从模板调用函数时，它被称为每帧。
因此，您的函数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>


{{100*i+1}}
{{100*i+2}
{{100*i+3}
{{100*i+4}

这将给你类似的东西（如下）。因为i（index）是当前正在运行的循环的索引

1234
101 102 103 104
201 202 203 204等
为什么不使用对象数组？您的数据可能最终成为一个

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>

myData=[
{key1:'val1'，key2:'val2'，key3:'val3'，key4:'val4'}，
{key1:'val1'，key2:'val2'，key3:'val3'，key4:'val4'}
];
{{obj.key1}}
{{obj.key2}}
{{obj.key3}}
{{obj.key4}}
原因是angular在识别到更改时会不断更新页面

为了解决您的问题，您可以将数据填充到ts中的数组（可能是二维数组，这取决于您的需要），然后在html中调用ngFor
 我是通过以下方式实现的：

在html中：

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

这是有道理的。那么，我如何在每个单元格中放置一个随机数，并在
ngFor
中使用，同时也避免这样做呢？我曾想过这样做，但最终硬编码的“测试”数据将非常大，因此我试图减少工作量，以便使用ngFor生成50行，每个行包含100个单元格，而无需创建对象来填充。您可以在组件中构建对象，将函数包装在一个可观察对象中，并使用异步管道在生成所有值后获得要显示的结果。@Stanislasdrg生成一组数字不是异步操作。没有理由使用异步管道或可观察对象。@DavidWalschots True。这只是一个建议，考虑到数据可能最终会从API中提取。fakeData是函数还是变量？因为根据你的表，它是函数，但根据你的伪数据代码是一个变量，我只是把它写得很奇怪。我首先使用了一个变量，每个变量都得到了相同的数字（我理解为什么）。第二个变量是一个函数。我这样做了，它一次又一次地改变了数字。@dcp3450我想我没有理解你的问题，所以你想把随机数存储起来，在生成随机数之后，如何一直保存这个数？正确。不过，这些都是测试数据，只是为了让我的UI就位。我需要它是随机的，所以宽度会改变，我不会在我的UI中假设任何东西。@dcp3450你能做到这一点吗？我正试图做完全相同的事情
 fakeData() {
    return  Math.floor(Math.random() * Math.floor(300));
  }