如何在Angular2中使用动态内容创建动态数量的div？

Question

我知道你会使用ngFor，但我不太清楚该怎么做。

基本上我想要创建n次以下的div，将第0个替换为第2个div为2，将第3个div替换为2，依此类推......

<div class="box">
    <p class="dut-text dut-title">
        {{list[0].data}}
    </p>
</div>

Answer 1

为items中的每个值创建以下div：

<div class="box" *ngFor="let item of items;let i=index">
    <p class="dut-text dut-title">
        {{list[i].data}}
    </p>
</div>

    

class MyComponent {
  items = ['a', 'b', 'c'];
}

<强>更新

您问题的替代解释（见评论）

<div class="box" *ngFor="let item of list">
    <p class="dut-text dut-title">
        {{item.data}}
    </p>
</div>

    

class MyComponent {
  list = ['a', 'b', 'c'];
}