每个带有斜角的按钮后面加载分量

Question

我想对两个分量进行通信时遇到问题。父级的成分是“ animal”，子级的成分是“ animalEspece。

这是我目前的网页：

problemComponent

[我希望当我喜欢Requin，Shark等某种动物时，...子儿子（称为animalEspece）仅显示这种动物。为此，我有一个列出所有动物的列表，并将此列表提供给了animalEspece组件。但是，当我变态时，什么也没有发生。组件animalEspece接收变量，但不显示任何内容。

这是我的动物html代码：

<p scope="col" style="text-shadow:0 0 2px #ff1c1ce5,0 0 30px #ff1c1ce5,0px 0px 5px #ff1c1ce5, 0 0 150px #ff1c1ce5;color:#ff1c1ce5;
text-align: center; font-size: 25px;">Nos especes</p>
<div class="scrolling-wrapper">
  <a *ngFor="let a of especeAnimalPresente" class="animated-button1" (click)="changeEspeceChoisi(a);">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    {{a}}
  </a>
</div>

<table class="table" style="color:white">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Espece</th>
        <th scope="col">Nom</th>
        <th scope="col">Sexe</th>
        <th scope="col">Signe distinctif</th>
        <th scope="col">Bilan de sante</th>
        <th scope="col">Date arrivee</th>
        <th scope="col">Date depart</th>
        <th scope="col">Taille</th>
        <th scope="col">Age</th>
        <th scope="col">Bassin d'appartenance</th>
        <th scope="col">supprimer</th>

      </tr>
    </thead>
    <tbody>
        <tr *ngFor="let a of animaux">
          <th scope="row">{{a.id}}</th>
          <td>{{a.espece}}</td>
          <td>{{a.nom}}</td>
          <td>{{a.sexe}}</td>
          <td>{{a.signeDistinctif}}</td>
          <td>{{a.bilanSante}}</td>
          <td>{{a.dateArr}}</td>
          <td>{{a.dateDep}}</td>
          <td>{{a.taille}}</td>
          <td>{{a.age}}</td>
          <td>{{a.bassin.id}}</td>
          <td>
            <button class="bouton17" (click)="supprimerAnimal(a.id)">
              Supprimer
            </button></td>
          <td></td>
        </tr>
      </tbody>
</table>

这是我的动物：

import { Component, OnInit } from '@angular/core';
import { AnimalService } from "./animal.service";
import { Animal } from "./animal";
import { Bassin } from "../bassin/bassin";

@Component({
  selector: 'app-animal',
  templateUrl: './animal.component.html',
  styleUrls: ['./animal.component.css']
})
export class AnimalComponent implements OnInit {

  private nomEspece:string;
  private animaux:Array<Animal>;
  private especeAnimalPresente:Array<string>;
  private especeAnimalPresenteTmp:Array<string>;
  constructor(private animalService: AnimalService) { 
    this.especeAnimalPresenteTmp = [];
  }

  ngOnInit() {
    this.recupAllAnimals();
  }

  supprimerAnimal(id:number){
    this.animalService.deleteAnimal(id);
  }

  recupAllAnimals(){
    this.animalService.getAllAnimaux().subscribe(data => {
      this.animaux = data;
      this.recupEspecePresent();
      console.log(this.animaux);
    })

  }

  recupEspecePresent(){
     if (this.animaux){
      for (let animal of this.animaux) {
          this.especeAnimalPresenteTmp.push(animal.espece);
      }
      this.especeAnimalPresente = this.removeDuplicates(this.especeAnimalPresenteTmp);
     }
  }

  removeDuplicates(array) {
    let unique = {};
    array.forEach(function(i) {
      if(!unique[i]) {
        unique[i] = true;
      }
    });
    return Object.keys(unique);
  }

  retourneAnimal(){
    return this.animaux;
  }

  changeEspeceChoisi(a){
    alert(a);
    this.nomEspece=a;
    alert(this.nomEspece);
  }

  retourneEspece(){
    return this.nomEspece;
  }

}
    Component son :
    <br>
    <app-animalespece [animaux]=retourneAnimal() [nomEspece]=retourneEspece()></app-animalespece>
    <br>

这是我的html animalEspece代码：

<table class="table" style="color:white">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Espece</th>
        <th scope="col">Nom</th>
        <th scope="col">Sexe</th>
        <th scope="col">Signe distinctif</th>
        <th scope="col">Bilan de sante</th>
        <th scope="col">Date arrivee</th>
        <th scope="col">Date depart</th>
        <th scope="col">Taille</th>
        <th scope="col">Age</th>
        <th scope="col">Bassin d'appartenance</th>
      </tr>
    </thead>
    <tbody>
        <tr *ngFor="let a of listeAnimauxEspece">
          <th scope="row">{{a.id}}</th>
          <td>{{a.espece}}</td>
          <td>{{a.nom}}</td>
          <td>{{a.sexe}}</td>
          <td>{{a.signeDistinctif}}</td>
          <td>{{a.bilanSante}}</td>
          <td>{{a.dateArr}}</td>
          <td>{{a.dateDep}}</td>
          <td>{{a.taille}}</td>
          <td>{{a.age}}</td>
          <td>{{a.bassinAppartenance}}</td>
        </tr>
      </tbody>
</table>

这是我的animalEspece.ts：

import { Component, OnInit, Input } from '@angular/core';
import { Animal } from "../animal/animal";

@Component({
  selector: 'app-animalespece',
  templateUrl: './animalespece.component.html',
  styleUrls: ['./animalespece.component.css']
})
export class AnimalespeceComponent implements OnInit {

  @Input()
  private animaux:Array<Animal>;

  @Input()
  private nomEspece:string;

  private listeAnimauxEspece:Array<Animal>;

  constructor() {
    this.listeAnimauxEspece = [];
  }

  ngOnInit() {
    this.filtreAnimauxEspece();
  }

  filtreAnimauxEspece(){
    if (this.animaux){
      for (let animal of this.animaux) {
        if (animal.espece == this.nomEspece){
          this.listeAnimauxEspece.push(animal);
        }
      }
    }
  }

}

经过多次测试，我了解到问题是我的组件animalEspece在我按下按钮之前已经被初始化。如果创建一个初始化为false的新布尔值（名为bool），但是当我按一个动物按钮时更改为true，就可以解决我的问题。如果我在动物html中写：

<app-animalespece *ngIf='bool' [animaux]=retourneAnimal() [nomEspece]=retourneEspece()></app-animalespece>

但是此解决方案仅适用于动物纽扣的第一个clic。我觉得这不是一个干净的解决方案。

因此，当我按动物按钮时，我需要帮助，该按钮显示相应的动物。还有每个按钮的按钮。

谢谢您的帮助。

Answer 1

您需要做的是在输入更改时进行拦截。现在的问题是子组件正在接受初始输入，而不是在检查输入的更新。

因此，解决问题的一种方法是为输入创建一个set函数。这样，

private _nomEspece:string;
@Input()
set nomEspece(nom:string) {
  // update value
  this._nomEspece = nom;
  // update list
  this.listeAnimauxEspece = [];
  this.filtreAnimauxEspece();
}
get nomEspece():string {
  return _nomEspece;
}

现在，每次输入更改时，您将更新值并更新列表。

Angular Docs - Intercept input property changes with a setter