1

当我尝试在 Angular 中组织两个组件之间的通信时，我遇到了一些困难。

父组件是“animal”，子组件是“animalEspece”。

这就是我的网页现在的样子：

网页演示

当我单击 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>

这是我的 animal.ts ：

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>

但是这个解决方案只适用于第一次点击动物按钮。而且我觉得这不是解决这个任务的好方法。

所以我需要帮助，以便当我单击动物按钮时，此按钮会显示相应的动物。每次点击那个按钮。

预先感谢您的帮助。

4

1 回答 1

1

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

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

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 - 使用 setter 拦截输入属性更改

于 2020-02-29T04:46:31.093 回答