Angular 2 - 创建具有相同 div 元素和动态内容的项目列表

Question

我想创建一个项目列表。每个项目将在一个 div 中包含一组元素，如下面标有“项目 1 的 div”。项目的数量不固定，因此需要动态创建 div。我该如何做到这一点？我需要一个一个地创建每个元素吗？有没有更好更快的方法？

在component.html中

<div>
   <div> //div for item 1
      <div style="background-image: url(urlx)">
         <span>{{text1}}</span>
      </div>
      <div>
         <p>{{text2}}</p>
      </div>
      <a href="" title="DISCOVER">DISCOVER</a>
   </div>
   //div for item 2
   //div for item 3
   //....
</div>

Answer 1

您可以使用 *ngFor 语句。 例如。

<div *ngFor="let list of lists">
 <div>
  <div style="background-image: url(urlx)">
   <span>{{list.text1}}</span>
    ...
  </div>
 </div>
</div>

另外，您必须在 .ts 文件中声明 lists。