Angular Bootstrap 对于 *ngFor

Question

我正在使用 *ngFor 获取一些对象，我想在 webpage.I 上显示它们使用 <div class col-sm-4> 每个 object.I 应该有 3 个一行，但我仍然有 12 个对象，我不明白为什么。

HTML:

<div class="display row" *ngFor="let field of fields">
  <div class="col-sm-6">
    <p>Field name: {{field.name}}</p>
    <p>Crop Type: {{field.Crop}}</p>
    <p>Description: {{field.Description}}</p>
    <button class = "modify">Modify</button>
    <button class="view" onclick="document.getElementById('ViewAll').style.display = 'block'">View all</button>
  </div>
  </div>

CSS:

.display{
    display:inline-block;
    border: 5px solid #1976d2;
    padding: 50px;
    margin: 20px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    border-radius: 15px;
    
}

Answer 1

因为 *ngFor 在外部 div，它正在为每个对象渲染新行。将其保留在 div 内并删除 css.

中的显示

<div class="display row" >
  <div class="col-sm-4" *ngFor="let field of fields">
    <p>Field name: {{field.name}}</p>
    <p>Crop Type: {{field.Crop}}</p>
    <p>Description: {{field.Description}}</p>
    <button class = "modify">Modify</button>
    <button class="view" onclick="document.getElementById('ViewAll').style.display = 'block'">View all</button>
  </div>
</div>

在css中：

.display{
border: 5px solid #1976d2;
padding: 50px;
margin: 20px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
border-radius: 15px;

}

Angular Bootstrap 对于 *ngFor

Angular Bootstrap for *ngFor

html

angular-ui-bootstrap

angular