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进行分块，然后在外层循环。

void Update() {
    if (Input.GetMouseButton(0)) {
        Debug.Log("once per frame: mouse button held");
    } else {
        Debug.Log("once per frame: mouse button NOT held");
    }
}

块函数：

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

来源：Link

如何布置每行指定数量的对象？

1 个答案: