角:如何与父子组件一起使用*ngFor

Question

反复循环子组件，但每次使用不同的数据，最好的方法是什么？

例如，在我的'sitelist‘组件(父组件)中，我希望循环遍历我的’汇总‘组件(子)，尽可能多地遍历数据。“摘要”仅仅是与我从服务中提取的对象数组“站点”中的每个索引对应的数据。

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中，声明它将从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)应该负责从服务中获取数据。

Answer 2

我会回答第一个问题：

Sitelist.html：

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

SummaryComponent.ts：@Input() site;

下面是一个很好的输入/输出示例：https://stackblitz.com/run?file=src%2Fapp%2Fapp.component.html