A ligao a componente incorporado em angular 7

votos
0

Em Angular (version 7) Eu tenho um componente (parcelas) embutido em outro componente (locais):

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

A idéia é que, se um usuário escolhe para ver ver parcelas de um site, em seguida, o componente incorporado é exibida tendo recebido o selectedSiteId.

Esta configuração funciona no primeiro clique. Mas não em cliques subsiquent. O botão está ligado à seguinte função:

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

Como eu disse, ele funciona no primeiro clique de botão, mas não em todos os cliques subsiquent botões. Por que é isso?

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 18/12/2018 em 11:06
fonte usuário
Em outras línguas...                            


1 respostas

votos
1

Você deve ter que chamar os getPlots método () dentro os ganchos do ciclo de vida ngOnChanges. Sempre que o valor @Input fica alterado, os ngOnChanges será chamado.

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 {
  }
}
Respondeu 18/12/2018 em 11:12
fonte usuário

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