La unión a componente incrustado en angular 7

votos
0

En angular (versión 7) Tengo un componente (parcelas) incrustado en otro componente (sitios):

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

La idea es que si un usuario decide ver ver gráficas de un sitio, entonces el componente incrustado aparece haber recibido el selectedSiteId.

Esta configuración funciona en la primera posición. Pero no en los clics subsiquent. El botón se vincula a la función siguiente:

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

Como digo, que funciona en el primer botón de clic, pero no en ningún botones subsiquent clics. ¿Por qué es esto?

código completo:

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>
Publicado el 18/12/2018 a las 11:06
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
1

Debe tener que llamar a los getPlots método () dentro de los ganchos del ciclo de vida ngOnChanges. Siempre que el valor @Input se cambia, las ngOnChanges se llama.

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 {
  }
}
Respondida el 18/12/2018 a las 11:12
fuente por usuario

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