Question

我是Angular2 +的新手，并测试了一些用户界面。为此，我想在一组通过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));时，它为每个单元格生成相同的数字。当我将其作为一个函数（如上所述）时，每个单元格中的数字都不同，但它们会不断变化。当我开始在这里拉动和放置实际数据时，显然每行/单元格上的数据会派上用场。

Answer 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（索引）是您当前正在运行的循环的索引

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

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

Answer 3

原因是角度在识别出变化时会不断更新页面。

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

Answer 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));
  }

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

4 个答案: