*ng 用于角度单击显示调用函数的内容

Question

我在 *ngFor 循环中有一个内容。当我单击内容(如手风琴(时，我调用一个函数，该函数传递该对象的 id，该函数返回对象的详细信息。问题是现在，当我单击时，它为每个手风琴而变化，而不是单独更改。该 HTML 是

<div class="card" *ngFor="let data of datas" (click)="fetchData(data.dataId); data.expanded = !data.expanded" style="cursor:pointer; width: 100%;">
<div class="card-body" style="display:flex">
<h5 class="card-title">{{data.name}} </h5>
</div>
<ng-container *ngIf="data.expanded">
{{dataContent.descriptionDetail}}
</ng-container>
</div>

在我的组件中

fetchData(dataId:number) {
this.service.fetchData(dataId).subscribe(
(result) => {
this.dataContent = result;
console.log(result);
}
);
}

如果我单击第一个手风琴，我会得到正确的数据内容。但是，如果我单击第二个，它会正确获得第二个 dataContent 值，但也会在第一个手风琴中。谢谢

Answer 1

问题是this.dataContent是一个在每个ng-container中显示的单个变量。相反，您需要做的是以某种方式管理data对象的集合及其各自的dataContent。

一种方法是在地图中维护一个对象集合，比如说，像这样：

// In your component class
dataContents: Map<any, any> = new Map<any, any>();
fetchData(dataId: number) {
this.service.fetchData(dataId).subscribe(result => {
this.dataContents.set(dataId, result);
});
}

然后在您的标记中：

<ng-container *ngIf="data.expanded">
{{dataContents.get(data.id)}}
</ng-container>

在此处查看示例(StackBlitz(

如果需要，使用此方法还可以避免每次从服务器获取数据。在fetchData中，您只需将this.service.fetchData调用包装在if (!this.dataContents.has(dataId) || !this.dataContents.get(dataId))中。