*ngFor 的 Angular 引导程序答案

【问题标题】：Angular Bootstrap for *ngFor*ngFor 的 Angular 引导程序
【发布时间】：2020-07-22 23:34:10
【问题描述】：

我正在使用*ngFor 来获取一些对象，我想在网页上显示它们。我对每个对象都使用<div class col-sm-4>。我应该连续有 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;
    
}

【问题讨论】：

我相信外部 div 处于循环状态。因此，它为每个对象呈现为一个新的 div。
我尝试将 'col-sm-4' 添加到外部 div 但仍然不起作用
尝试在内部 div 中使用 *ngFor。

标签： html angular angular-ui-bootstrap

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

}

【讨论】：