Wiązanie z osadzonym składnikiem w kątowy 7

głosy
0

W kątowe (wersja 7) Mam komponentu (działek) osadzonym na drugi składnik (miejsc):

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

Chodzi o to, że jeśli użytkownik zdecyduje się zobaczyć zobaczyć działek danej witryny, a następnie osadzony element jest wyświetlany po odebraniu selectedSiteId.

Ta konfiguracja działa na pierwszym kliknięciem. Ale nie na subsiquent kliknięć. Przycisk jest związany z następujących funkcji:

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

Jak mówię, to działa na pierwszego kliknięcia przycisku, ale nie na żadnych przycisków subsiquent kliknięć. Dlaczego to?

Pełny kod:

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>
Utwórz 18/12/2018 o 11:06
źródło użytkownik
W innych językach...                            


1 odpowiedzi

głosy
1

Trzeba było zadzwonić do getPlots (metoda) wewnątrz ngOnChanges haków cyklu życia. Ilekroć wartość @Input zostanie zmieniony, ngOnChanges będzie dzwonił.

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 {
  }
}
Odpowiedział 18/12/2018 o 11:12
źródło użytkownik

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