У меня возникают некоторые трудности, когда я пытаюсь организовать связь между двумя компонентами в Angular.
Родительский компонент - "animal", а дочерний - "animalEspece".
Вот так выглядит моя веб-страница:
Когда я нажимаю на животное, такое как Реквин, Акула, ... Я хочу, чтобы дочерний компонент (называемый 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, уже существует инициализируется до нажатия кнопки c. Я могу решить мою проблему, если я создам новый логический тип (с именем bool), инициализированный как false, но изменится на true, когда я нажму c на кнопке животного. И если я напишу в животном html:
<app-animalespece *ngIf='bool' [animaux]=retourneAnimal() [nomEspece]=retourneEspece()></app-animalespece>
Но это решение работает только для первого нажатия на кнопку животного. И я чувствую, что это не очень хороший подход для решения этой задачи.
Поэтому мне нужна помощь, чтобы при нажатии на кнопку животного эта кнопка отображала соответствующее животное. И это при каждом нажатии на эту кнопку.
Заранее благодарю за помощь.