单击任何卡片时，在卡片的网格布局中插入其他div

Question

功能要求：

• 卡片以网格格式动态显示
• 单击任何卡，它将通过API调用另外6种产品。
• 新产品系列应插入到已点击的卡片旁边。
• 卡片网格布局中的其他产品必须移至网格中的更高位置（新添加产品旁边的礼拜式）。

Answer 1

如果我正确理解了您的问题，则需要执行以下操作： 从服务器收到新产品时，需要将其插入到单击的项目旁边。

我假设您正在通过ngFor循环显示网格，因此可以按照以下方式实现逻辑：

<div *ngFor="let item of items; let i = index">
<card (onclick)="addNew(i)">Card content</card>
</div>

您的addNew看起来像这样：

addNew(index: number) {
this.http.get('url').subscribe(data => this.items.splice(index, 0, ...data);
}

使用以下代码this.items是您在网格中显示的项目的列表。 data是新项目的数组。 this.items.splice(index, 0, ...data)意味着您可以在单击的项目旁边插入新项目。