Как выложить указанное количество объектов в строке?

Question

У меня есть угловой проект, в котором мне нужно разместить элементы в формате сетки.Мне нужно два предмета в строке в карточном формате.Например, где мой массив:

myfruit:fruit[] = [new fruit(1,"apple","red fruit"),
                   new fruit(2,"banana","yellow fruit"),
                   new fruit(3,"orange","orange fruit")]
}

class fruit{
  public id:number;
  public name:string;
  public description:string;

  constructor(id:number,name:string,description:string){
    this.id=id;
    this.name = name;
    this.description = description;
  }

Соответствующий HTML:

<div *ngFor="fruit in myfruit">
  <div *ngFor="let i = 0; i < 2;i++">
    <h1>{{fruit.name}}</h1>
    <p>{{fruit.description}}</p>
  </div>
</div>

Это правильный способ размещения моих элементов в строках по два?

Answer 1

Если вы хотите сделать это с помощью javascript, вы можете разделить вашу коллекцию на 2 и зациклить ее на внешнем слое.

<div *ngFor="let fruitChunk of chunkArray(myfruit, 2)">
  <div *ngFor="let fruit of fruitChunk">
    <h1>{{fruit.name}}</h1>
    <p>{{fruit.description}}</p>
  </div>
</div>

Функция чанка:

function chunkArray(myArray, chunk_size){
    var index = 0;
    var arrayLength = myArray.length;
    var tempArray = [];

    for (index = 0; index < arrayLength; index += chunk_size) {
        var myChunk = myArray.slice(index, index+chunk_size);
        // Do something if you want with the group
        tempArray.push(myChunk);
    }

    return tempArray;
}

Источник: Ссылка