如何将列表拆分为列？

Question

我有对象列表，例如：

 cases: Case[] = [
    { id: 1, name: 'A' },
    { id: 1, name: 'B' },
    { id: 1, name: 'C' },
    { id: 1, name: 'D' },
    { id: 1, name: 'E' },
    { id: 1, name: 'F' },
  ];

我想在 ngFor 指令中将它显示为 4 列

  <li *ngFor="let row of casesRows; index as i;">
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">{{i}}</h5>

      </div>
    </div>
  </li>

我坚持使用 Typescript 将简单列表转换为 4 列列表。 我的第一个想法是：

ngOnInit() {
    this.getCasesRows();
  }

  getCasesRows() {
    this.i = 0;
    this.cases.forEach(element => {
      console.log(element)
      if (this.i = 0 ) {
        this.cases4.col1 = element;
      } else if (this.i = 1) {
        this.cases4.col2 = element;
      } else if (this.i = 2) {
        this.cases4.col3 = element;
      } else if (this.i = 3) {
        this.cases4.col4 = element;
        this.i = -1;
      }
      this.i = this.i + 1;
    });
  }

但我最终得到了这样的错误： ERROR TypeError: "_this.cases4 is undefined"

预期输出：4 列显示如下：

A B C D

英孚

作为卡片

Answer 1

你需要像 array_chunk 这样的东西，例如：

 var cases = [ { id: 1, name: 'A' }, { id: 1, name: 'B' }, { id: 1, name: 'C' }, { id: 1, name: 'D' }, { id: 1, name: 'E' }, { id: 1, name: 'F' }, ]; function array_chunk(arr, len) { var chunks = [], i = 0, n = arr.length; while (i < n) { chunks.push(arr.slice(i, i += len)); } return chunks; } console.log(array_chunk(cases, 4));

这是一个角度示例： https : //stackblitz.com/edit/angular-wplxwm

Answer 2

尝试这个..

ts

  const cases = [
  { id: 1, name: 'A' },
  { id: 1, name: 'B' },
  { id: 1, name: 'C' },
  { id: 1, name: 'D' },
  { id: 1, name: 'E' },
  { id: 1, name: 'F' },
];

html

<div class="row">
  <div class="col-md-3" *ngFor="let row of cases; index as i;">
    <div class="card">
      <div class="card-body">
        <h2 class="card-title">{{i}}</h2>
        <h4>{{row.name}}</h4>
      </div>
    </div>
  </div>
</div>

现场演示

Answer 3

试试这个来消除你的错误。

var cases4 = {};
var i = 1;
 this.cases.forEach(element => {
       cases4["col"+i++] = element.name;
    });

Answer 4

我在这个问题中找到了答案。

答案是：

1. 安装引导程序
2. 使用 class="col-md-4" 获得预期结果。