angular ng每行显示3个按钮

Question

我试图在每个 div class="行" 中显示 3 个按钮。我正在使用 *ngFor 遍历数组以显示具有正确按钮文本的按钮。

下面是我的数据示例： [{"NODE_ID":21.0,"NODE_DESC":"终端组件","GRPSEQNO":1.0}, {"NODE_ID":22.0,"NODE_DESC":"DR CORE ASSEMBLY","GRPSEQNO":2.0},{"NODE_ID":23.0,"NODE_DESC" :"WINDING","GRPSEQNO":3.0},{"NODE_ID":25.0,"NODE_DESC":"SOLDERING","GRPSEQNO":1.0}, {"NODE_ID":24.0,"NODE_DESC":"焊接前安排工艺","GRPSEQNO":2.0},{"NODE_ID":29.0,"NODE_DESC ":"高度检查","GRPSEQNO":3.0}]

我想要实现的布局是： button layout

我无法生成此布局。请帮忙。提前谢谢你。

我创建了一个我目前正在做的 stackblitz https://stackblitz.com/edit/angular-wipq2r?file=src/app/app.component.ts

Answer 1

你能试试这个吗

在Productlist.html

  <div *ngFor="let item of procDesc; let i = index">
    <div class="row">
        <button  type="button"  class="btn btn-outline-primary btn-xs col-md-12 btn-block"
          style="margin-bottom:4px; word-wrap:break-word; color: white">
          <span style="font-size:smaller; color: white">{{ procDesc[i].NODE_DESC
          }}</span>
        </button>&nbsp;
        <!-- <button
          type="button"
          class="btn btn-outline-primary btn-xs col-md-12 btn-block"
          style="margin-bottom:4px; word-wrap:break-word; color: white">
          <span style="font-size:smaller; color: white">{{
            procDesc[i].NODE_DESC
          }}</span>
        </button>&nbsp;
        <button
          type="button"
          class="btn btn-outline-primary btn-xs col-md-12 btn-block"
          style="margin-bottom:4px; word-wrap:break-word; color: white">
          <span style="font-size:smaller; color: white">{{
            procDesc[i].NODE_DESC
          }}</span>
        </button> -->
    </div>
  </div>

并在 productlist.css

.btn {
  white-space: normal !important;
  padding: 0.5;
  width: 150px;
  height: 100px;
}
:host {
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  width: 600px;
}

让我知道这是否适合你？

angular ng每行显示3个按钮

angular ngFor display 3 buttons per row

html

angular

typescript

ngfor