Angular 2：按需为 ngFor 项目加载单个数据

Posted 2023-03-13

【中文标题】Angular 2：按需为 ngFor 项目加载单个数据

【英文标题】：Angular 2: loading individual data for ngFor items on demand

【发布时间】：2018-07-21 10:33:26

【问题描述】：

我有一个应用程序，它从 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());

这是在我的组件文件中获取数据（这里有一个额外的问题，我这样做是否正确，我是否应该使用其他方法来获取数据，因为我只加载一次？）

loadProject(companyID, projectID) 
    this.dataSubscription = this.dataService.getProjectData(companyID, projectID).subscribe(res => this.projectData = res);

这是我的 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>

一切正常，但正如我所说，当我按下 LOAD MORE DATA 按钮时，所有项目都会获得有关单击项目的相同数据。

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

【参考方案1】：

这是因为您更新了this.projectData 变量，并为*ngFor 循环中的每个项目使用了相同的变量。一种正确的方法是将company.projects 数组与新收到的getProjectData 响应合并。将此数据添加到您从服务器获取的数组元素中，并像这样插入它，而不是对所有迭代项使用一个变量：

projects.projectData | json

但要做好准备，对于某些项目，不会有任何价值。

P.S：我描述了主要思想，你应该考虑一下你的数组和*ngFor循环的结构。