javascript - 如何在 Angular2 中创建具有动态内容的动态数量的 div？

Question

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

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

<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'];
}