如何重复*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'，每个都显示相应文本块中的文本 [round]。你好，'round' 在使用视图时增加？

轮数为 1 时的示例

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

即

嗨
有

轮数为 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> 替换 span 但我不记得确切的语法，所以我使用了 span

Answer 2

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

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

笨蛋: http://plnkr.co/edit/KizxAHaD70kac2XB2go9?p=preview

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

How to repeat *ngFor a number of times equal to the value of a variable?

cordova

ionic-framework

ngfor

angular