Angular *对于角度单击显示内容调用函数

我在一个*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>

---

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

问题在于

这个。dataContent

是单个变量，它显示在每个

ng容器中。您需要做的是以某种方式管理
数据
对象的集合及其各自的
数据内容

一种方法是以如下方式维护对象集合：

//在组件类中
数据内容：地图（StackBlitz）

使用这种方法，如果愿意，还可以避免每次从服务器获取数据。在
fetchData
中，如果（！this.dataContents.has（dataId）| |！this.dataContents.get（dataId）），您只需包装
this.service.fetchData
调用
if（！this.dataContents.has（dataId）
，
您能创建一个stackblitz来重现这个问题吗？我不能为这个问题创建一个示例，因为我不知道从哪里获取数据。但我需要的是，但我不能做的是，得到每一个手风琴展开时的细节。每个手风琴的细节都不一样，我可以打开所有的手风琴，每个手风琴都有细节。现在，如果我打开其中一个，我只能显示每个手风琴中最后一个的细节。你可以模拟数据。你试过使用（TrackBy）吗[
fetchData(dataId:number) {
        this.service.fetchData(dataId).subscribe(
            (result) => {
                this.dataContent = result;
                console.log(result);
            }
        );
    }