当我尝试在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>
这是我的动物:
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>
但是此解决方案仅对动物按钮的第一次单击有效。而且我认为这不是解决此任务的好方法。
因此,当我单击动物按钮时,我需要帮助,此按钮显示相应的动物。而且每次点击该按钮都可以。
谢谢您的帮助。
您需要做的是在输入更改时进行拦截。现在的问题是子组件正在接受初始输入,而不是在检查输入的更新。
因此,解决问题的一种方法是为输入创建一个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