Question

我正在使用Ionic 2 Framework，因此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] .hello中显示文本，并且在使用视图时'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>

喜
有
约翰
DOE

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

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

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

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

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

2 个答案: