时间戳

首页 > 解决方案 > *ngFor 的 Angular 引导程序

html - *ngFor 的 Angular 引导程序

问题描述

我*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;
    
}

标签： htmlangularangular-ui-bootstrap

解决方案

由于 *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;

}

推荐阅读