La liaison aux composants embarqués dans angulaire 7

voix
0

Dans angulaire (version 7) J'ai un composant (parcelles) intégré dans un autre composant (sites):

<div class=plots *ngIf=!selectedSiteId == ''>
  <app-plots [selectedsiteId]=this.selectedSiteId></app-plots>
</div>

L'idée est que si un utilisateur choisit de voir voir les parcelles d'un site, puis apparaît le composant intégré ayant reçu le selectedSiteId.

Cette configuration fonctionne sur le premier clic. Mais pas sur les clics subsiquent. Le bouton est lié à la fonction suivante:

  getPlots(id: number): void {
    this.selectedSiteId = id;
  }

Comme je le dis, cela fonctionne sur le premier bouton clic, mais pas sur les boutons subsiquent clics. Pourquoi est-ce?

Code complet:

sites.component.ts

import { Component, Inject, OnInit, Input } from '@angular/core';
import { DataAccessService } from '../data-access.service';
import { Site } from '../site';

@Component({
  selector: 'app-sites',
  templateUrl: './sites.component.html',
  styleUrls: ['./sites.component.css']
})

export class SitesComponent implements OnInit {
  public sites: Site[];
  public selectedSiteId: number = 0;
  constructor(private dataAccessService: DataAccessService) { }

  ngOnInit() {
    this.getSites();
  }

  getPlots(id: number): void {
    this.selectedSiteId = id;
  }

  getSites(): void {
    this.dataAccessService.getSites()
        .subscribe(sites => this.sites = sites);
  }
}

sites.component.html

<table class='table' *ngIf=sites>
  <thead>
    <tr>
      <th>ID</th>
      <th>Site</th>
      <th>Postcode</th>
      <th>Plots</th>
      <th>Plots Completed</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor=let site of sites>
      <td>{{ site.id }}</td>
      <td>{{ site.siteName }}</td>
      <td>{{ site.sitePostCode }}</td>
      <td>{{ site.plotCount }}</td>
      <td>{{ site.plotCompletedCount }}</td>
      <!-- <td>{{ site.plots.length }}</td> -->
      <td><button (click)=getPlots(this.site.id)>Show Plots</button></td>
    </tr>
  </tbody>
</table>


<div class=plots *ngIf=!selectedSiteId == ''>
  <app-plots [selectedsiteId]=this.selectedSiteId></app-plots>
</div>


<div class=plots *ngIf=!selectedSiteId == ''>
  <app-plots [selectedsiteId]=this.selectedSiteId></app-plots>
</div>

plots.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { DataAccessService } from '../data-access.service';
import { Plot } from '../site';

@Component({
  selector: 'app-plots',
  templateUrl: './plots.component.html',
  styleUrls: ['./plots.component.css']
})

export class PlotsComponent implements OnInit { 

  public plots: Plot[];
  @Input() selectedsiteId: number;

  constructor(private dataAccessService: DataAccessService) { }

  ngOnInit() {
    this.getPlots(this.selectedsiteId);
  }

  getPlots(id: number): void {
    alert(id);
    this.dataAccessService.getPlots(id)
      .subscribe(plots => this.plots = plots);
  }

  loadPlotDetails(id: number): void {
  }
}

plots.component.html

<table class='table' *ngIf=plots>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Site</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor=let plot of plots>
      <td>{{ plot.id }}</td>
      <td>{{ plot.name }}</td>
      <td>{{ plot.site }}</td>
      <a routerLink=/plot-detail>Details</a>
    </tr>
  </tbody>
</table>
Créé 18/12/2018 à 11:06
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
1

Vous devriez avoir à appeler la méthode getPlots () dans les crochets du cycle de vie ngOnChanges. Chaque fois que la valeur @input est changée, les ngOnChanges sera appelé.

import { Component, OnInit, Input } from '@angular/core';
import { DataAccessService } from '../data-access.service';
import { Plot } from '../site';

@Component({
  selector: 'app-plots',
  templateUrl: './plots.component.html',
  styleUrls: ['./plots.component.css']
})

export class PlotsComponent implements OnInit { 

  public plots: Plot[];
  @Input() selectedsiteId: number;

  constructor(private dataAccessService: DataAccessService) { }

  ngOnInit() {
    this.getPlots(this.selectedsiteId);
  }

  ngOnChanges() {
    this.getPlots(this.selectedsiteId);
  }

  getPlots(id: number): void {
    alert(id);
    this.dataAccessService.getPlots(id)
      .subscribe(plots => this.plots = plots);
  }

  loadPlotDetails(id: number): void {
  }
}
Créé 18/12/2018 à 11:12
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more