Angular：如何将 *ngFor 与父子组件一起使用

Question

多次循环子组件但每次使用不同数据的最佳方法是什么？

例如，在我的“站点列表”组件（父组件）中，我想遍历我的“摘要”组件（子组件），尽可能多地遍历数据。“摘要”将只是与我从服务“站点”中提取的对象数组中的每个索引相对应的数据。

1. 考虑到这种父/子关系，显示此数据的最佳方式是什么？

2. 我需要声明数据并从服务中获取它的哪个文件（sitelist.component.ts 或 summary.component.ts）？

对于#1，我可以更改什么以正确循环遍历这些数据？不确定我可以传递这样的数据。

Sitelist.html（父级）

<div *ngFor="let site of sites">
  <app-summary></app-summary>
</div>

summary.html（子）：

 <li>{{site.id}}</li>
 <li>{{site.name}}</li>
 <li>{{site.location}}</li>

对于#2，根据#1 的答案，我应该将可观察对象放入哪个文件以从服务中获取数据？（sitelist.component.ts 或 summary.component.ts）

ngOnInit() {
  let observable = this._dataService.getSites()
  observable.subscribe(data => {
      console.log("got info")
      console.log(data)
      this.sites = data
    })}
}

在我的服务中，我有：

export class DataService {
    sites;
    constructor(private _http: HttpClient) { }
    getSites(){ 
      return this._http.get(`http://localhost:3000/sites.json`);
    }
}

谢谢！！如果我能澄清任何事情，请告诉我

Answer 1

在您的 中SummaryComponent，声明一个@Input将从SiteListComponent.

因此，获取站点列表的逻辑将在您的SiteListComponent课堂上进行。

ngOnInit() {
  this._dataService.getSites()
    .subscribe(data => this.sites = data)
}

@Input通过属性绑定语法将站点作为属性传递给 SummaryComponent，如下所示：

<div *ngFor="let site of sites">
  <app-summary [site]="site"></app-summary>
</div>

你SummaryComponent的 TypeScript 类应该有一个site用@Input装饰器装饰的变量，如下所示：

@Input() site;

通常，父组件( SiteListComponent) 应该负责从服务中获取数据。