角度2:按需加载ngFor项目的单个数据
角度2:按需加载ngFor项目的单个数据
提问于 2018-02-10 22:53:24
我有一个应用程序，它从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数据按钮时，所有项目都会得到关于单击项的相同数据。
编辑:与其加载一个新的项数组，我是否应该尝试将新的项数组与现有的项数组(创建初始ngFor循环的数组)合并呢？
回答 1
Stack Overflow用户
发布于 2018-02-10 23:11:54
这是因为您更新了this.projectData变量，并对*ngFor循环中的每个项使用相同的变量。正确的方法之一是将company.projects数组与新接收的getProjectData响应合并。将此数据添加到从服务器获取数据的数组元素中，并对其进行如下插值，而不是对所有迭代项使用一个变量：
{{projects.projectData | json}}但是要做好准备，对于某些项目来说，没有价值。
P.S: --我描述了主要思想，您应该考虑数组和*ngFor循环的结构。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48726431
复制相关文章
相似问题
腾讯云开发者
