Question

我有一个应用程序从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循环的项目）合并，而不是加载新的项目数组吗？

Answer 1

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

{{projects.projectData | json}}

但要做好准备，对某些项目来说，没有价值。

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

Angular 2：根据需要为ngFor项加载单个数据

1 个答案: