Question

在我的Angular应用程序中，我的 .ts文件中有一系列公司，这些公司使用 ngFor 在以下代码中显示在HTML中：

<div class="card-deck">
  <div class="card" *ngFor="let company of companies">
      <div class="card-body">
         <h5 class="card-title">         
             {{ company.companyName }}
          </h5>
       </div>
  </div>
</div>

上面的卡片组在一行中显示了整个公司列表。

例如，如果有3个公司，则它们在屏幕上显示为一行。如果有10家公司，它们将显示在一行中。

有人可以让我知道我需要对TS或HTML进行哪些更改，以便可以设置每行的公司数量吗？即最多只能在一行中显示3家公司，然后再移动到下一行。

非常感谢。

Answer 1

作为一种可能的解决方案，可以从companies创建多维数组并使用两个*ngFor（在行上迭代，然后在companies上迭代）。

// component.ts

companies = [{
    companyName: 'first'
  },
  {
    companyName: 'second'
  },
  {
    companyName: 'third'
  }
  ...
] // for example, ten elements in companies

companiesInRow: number = 3; // number of companies in row
rows;

ngOnInit() {
  // create multidimensional array
  this.rows = this.companies.reduce((acc, value, index) => {
    if (index % this.companiesInRow == 0 && index !== 0) acc.push([])
      acc[acc.length - 1].push(value)
    return acc;
  }, [[]]);
}


// component.html
<div class="card-deck" *ngFor="let comps of rows">
  <div class="card" *ngFor="let company of comps">
    <div class="card-body">
      <h5 class="card-title">         
         {{ company.companyName }}
      </h5>
    </div>
  </div>
</div>

选中stackblitz

Answer 2

一种简单的方法是向您的卡style中添加一些div，例如：

<div class="card-deck">
  <div class="card" *ngFor="let company of companies" style="width:33%; display: inline-block; text-align: center">
      <div class="card-body">
         <h5 class="card-title">         
             {{ company.companyName }}
          </h5>
       </div>
  </div>
</div>

You can view the output of above code here

如何在Angular应用中跨多行显示数组项

2 个答案: