angular - 单击任何卡片时，在卡片的网格布局中插入额外的 div

Question

功能要求：

• 卡片以网格格式动态显示
• 单击任何卡时，它将从 API 调用另外 6 种产品。
• 新的产品集应该被插入到被点击的卡片旁边。
• 卡片网格布局中的其他产品必须移动到网格上的较晚位置（新添加产品旁边的仪式）。

标签： angular

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)意味着您在单击的项目旁边插入新项目。