La liaison aux composants embarqués dans angulaire 7

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>