如何在 Angular2 中创建具有动态内容的动态 div？答案

【问题标题】：How do you create a dynamic number of divs with dynamic content in Angular2?如何在 Angular2 中创建具有动态内容的动态 div？
【发布时间】：2016-08-02 21:35:13
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html css angular

【解决方案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'];
}

更新

您问题的另一种解释（参见 cmets）

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

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

【讨论】：

您应该可以使用{{item.data}} 而不是{{list[i].data}}，因此在*ngFor 语句中不需要let i=index。
其实我不确定。问题是“用 1 替换 0 来表示第二个 ...”。我想这取决于@Jon 真正想要完成的事情。
这不只是因为索引是从零开始的吗？第二个 div（视觉上）的索引为 1。
如果items 和list 相同但它们可能是不同的集合，您的假设是正确的。这个问题还不够清楚。
是的，没错。