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。但是，如果我单击第二个，则可以正确获取第二个dataContent值，也可以在第一个手风琴中获取。谢谢

Answer 1

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

一种方法是像这样在Map中维护对象的集合：

// 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>

查看示例here（StackBlitz）

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

* ng对于单击功能的角度单击显示内容

1 个答案: