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。