Angular 角度2：按需加载ngFor项目的单个数据

我有一个应用程序，它从mongodb加载项目，并使用ngFor将它们放入列表中。现在，每个项目都有一个按钮来加载有关该项目的更多数据，但是当我加载一个项目的数据时，相同的数据会自动添加到所有其他项目。

我想，我可以做一些ngIf解决方案，但有没有更优雅的方法来做到这一点

这在我的数据服务文件中，用于从mongo加载数据：

getProjectData(companyID, projectID): Observable<any> {
    return this.http.get(`/api/get_test_project/${companyID}/${projectID}`).map(result => this.result = result.json());
}

这是我的for循环：

<div  *ngFor="let projects of company.projects;">
    {{projects.project.name}}
    <div  click)="loadProject(company.id, projects.project.id)">
        LOAD MORE DATA
    </div>
    <div>
        MORE DATA:
        {{this.projectData | json}}
    </div>
</div>

{{projects.project.name}
加载更多数据
更多数据：
{{this.projectData | json}}

这一切都是可行的，但正如我所说的，当我按下LoadMoreData按钮时，所有项目都会获得关于单击项目的相同数据

---

编辑：我是否应该尝试将新的项目数组与现有的项目数组（创建初始ngFor循环的数组）合并，而不是加载新的项目数组？

这是因为您更新了

此.projectData

变量，并对

*ngFor

循环中的每个项目使用相同的变量。正确的方法之一是将

company.projects

数组与新收到的

getProjectData

响应合并。将此数据添加到从服务器获取的数组元素中，并按如下方式插值，而不是对所有迭代项使用一个变量：

{{projects.projectData | json}}

但要准备好，对于某些项目，将不会有一个值

p.S:我描述了主要思想，您应该考虑数组的结构和

*ngFor

循环

{{projects.projectData | json}}