Question

多次遍历子组件但每次都有不同数据的最佳方法是什么？

例如，在我的“站点列表”组件（父级）中，我想遍历我的“摘要”组件（子级），以获取数据所需的次数。 “摘要”将只是与我从服务“站点”中提取的对象数组中每个索引对应的数据。

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

我需要声明哪个文件（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）应该负责从服务中获取数据。

Angular：如何在父子组件中使用* ngFor

1 个答案: