angular - 如何将列表分成几列？(How to split list into columns?)

Question

I have list of objects like:

(我有类似的对象列表：)

 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' },
  ];

and I want to display it as 4 columns in ngFor directive

(我想在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>

I'm stuck with Typescript converting simple list into 4 column list.

(我被Typescript转换为4列列表所困扰。)

My first idea was:

(我的第一个想法是：)

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;
    });
  }

But I end up with error like: ERROR TypeError: "_this.cases4 is undefined"

(但是我最终遇到如下错误 ： 错误TypeError：“ _ this.cases4未定义”)

Expected Output: 4 columns displayed like this:

(预期输出：显示四列，如下所示：)

ABCD

(A B C D)

EF

(英孚)

as cards

(作为卡)

  ask by Tommy Lee Jones w Sciganym translate from so

Answer 1

You need something like array_chunk like in example:

(您需要像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)); 

Here is an example in angular: https://stackblitz.com/edit/angular-wplxwm

(这是角度的示例： https : //stackblitz.com/edit/angular-wplxwm)