javascript - Angular: How to use *ngFor with Parent Child components - Stack Overflow

admin管理员组

文章数量:1391960

What's the best way to loop through a child ponent multiple times, but with different data each time?

For example, within my 'sitelist' ponent (parent), I want to loop through my 'summary' ponent (child), as many times as it takes to get through the data. The 'summary' will just the data corresponding to each index in an array of objects I'm pulling from my service, 'sites.'

1. What's the best way to display this data, considering this parent/child relationship?

2. Which file (sitelistponent.ts or summaryponent.ts) do I need to declare the data and grab it from the service?

For #1 what can I change to correctly loop through this data? Not sure I can pass data like that.

Sitelist.html (parent)

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

summary.html (child):

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

For #2, Depending on the answer for #1, which file should I put my observable in to grab data from the service? (sitelistponent.ts or summaryponent.ts)

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

In my Service I have:

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

Thanks!! let me know if I can clarify anything

What's the best way to loop through a child ponent multiple times, but with different data each time?

For example, within my 'sitelist' ponent (parent), I want to loop through my 'summary' ponent (child), as many times as it takes to get through the data. The 'summary' will just the data corresponding to each index in an array of objects I'm pulling from my service, 'sites.'

1. What's the best way to display this data, considering this parent/child relationship?

2. Which file (sitelist.ponent.ts or summary.ponent.ts) do I need to declare the data and grab it from the service?

For #1 what can I change to correctly loop through this data? Not sure I can pass data like that.

Sitelist.html (parent)

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

summary.html (child):

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

For #2, Depending on the answer for #1, which file should I put my observable in to grab data from the service? (sitelist.ponent.ts or summary.ponent.ts)

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

In my Service I have:

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

Thanks!! let me know if I can clarify anything

• javascript
• html
• angular
• typescript

Share Improve this question Follow edited Jul 9, 2020 at 15:53 Falko 18k1414 gold badges6565 silver badges116116 bronze badges asked Aug 23, 2018 at 16:03 Devstar34Devstar34 1,09722 gold badges2727 silver badges5757 bronze badges 1

• Put the Observable in the parent, and pass the value into the child using @Input bindings – user184994 Commented Aug 23, 2018 at 16:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

In your SummaryComponent, declare an @Input property that it's going to get from the SiteListComponent.

So the logic to get the sites list will go in your SiteListComponent class.

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

Pass the site(s) as an @Input property to SummaryComponent via property binding syntax like this:

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

And your SummaryComponent's TypeScript class should have a site variable decorated with the @Input decorator like this:

@Input() site;

Generally, the parent ponent(SiteListComponent) should be responsible to get the data from the service.

I will answer the first question:

Sitelist.html:

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

SummaryComponent.ts: @Input() site;

Here is a good input/output example: https://stackblitz./run?file=src%2Fapp%2Fapp.ponent.html

本文标签： javascriptAngular How to use *ngFor with Parent Child componentsStack Overflow