如何重复 *ngFor 的次数等于变量的值？

Question

我正在使用 Ionic 2 框架以及 Angular 2 和 Ts。

在我的 ts 文件中，我有一个变量，比如说“round”和一个对象“textblocks”

round:number;
textblocks=[{hello:'hi'},{hello:'there'},{hello:'john'},{hello:'doe'}];

'Round' 值在应用程序的生命周期内不断变化（0 到 3）。

然后在我的 html 文件中，我有一个列表：

<ul>
  <li>{{textblocks[round].hello}}</li>      
</ul>

我可以使用 ngFor 来显示与变量“round”中的数字一样多的“li”，每个都显示对应的 textblocks[round].hello 中的文本，使用视图时“round”增加？

round 为 1 时的示例

<ul>
  <li>{{textblocks[0].hello}}</li>   
  <li>{{textblocks[1].hello}}</li>      
</ul>

那是

• 你好
• 那里

round 为 3 时的示例

<ul>
  <li>{{textblocks[0].hello}}</li>   
  <li>{{textblocks[1].hello}}</li> 
  <li>{{textblocks[2].hello}}</li> 
  <li>{{textblocks[3].hello}}</li>       
</ul>

• 你好
• 那里
• 约翰
• 确实

Answer 1

是的，你可以，就像这样

<ul>
    <span *ngFor="let tb of textblocks; let i = index;">
        <li *ngIf="i <= round">{{tb.hello}}</li>
    </span>
</ul>

您可以用<template></template> 替换跨度，但我不记得确切的语法，所以我使用了跨度

Answer 2

您也可以使用 slice 管道，它是一个内置的 Angular 管道：

<li *ngFor="let textblock of textblocks | slice:0:round">
    {{textblock?.hello}}
</li>

Plunker：http://plnkr.co/edit/KizxAHaD70kac2XB2go9?p=preview