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 的答案，我应该将我的 observable 放入哪个文件以从服务中获取数据？ （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 中，声明将从SiteListComponent 获取的@Input 属性。

因此，获取站点列表的逻辑将放在您的 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）应该负责从服务中获取数据。