在每个按钮上单击角度后加载组件

阿兰·希克利(Alain Al-Shikhley)

当我尝试在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>

This is my html animalEspece code :

<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>

And this is my 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);
        }
      }
    }
  }

}

After many test I understand that the problem it was my component animalEspece is already initialized before I clic on a button. I can solve my probleme if I create a new boolean (named bool) initialized to false, but change to true when I clic on an animal button. And if I write in the animal html :

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

But this solution works only for the first click on the animal button. And I feel that it is not a good approach to solve this task.

So I need help in order to when I click in an animal button, this button displays the respective animal. And that for each click on that button.

Thank you in advance for your help.

cabesuon

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

因此,解决问题的一种方法是为输入创建一个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-截距输入属性随设置器而变化

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

单击按钮后JqGrid不要重新加载

来自分类Dev

单击后从按钮上移开焦点

来自分类Dev

AJAX:单击“提交”按钮上的加载URL

来自分类Dev

单击按钮后,将重新加载页面,而不是调用函数

来自分类Dev

JavaScript:单击按钮后将图像加载到div中

来自分类Dev

角度:单击按钮后打开文件对话框

来自分类Dev

允许按钮阵列在单击后加载音频元素吗?

来自分类Dev

角度-仅在单击的行上启用按钮

来自分类Dev

单击按钮后Pyqt5加载İmage

来自分类Dev

反应:单击按钮后重新渲染组件

来自分类Dev

在按钮上加载新组件单击在ReactJs中?

来自分类Dev

在Vue JS中加载组件时默认单击按钮

来自分类Dev

单击按钮后,React中的组件重复

来自分类Dev

单击按钮后显示图片,并在加载iframe时隐藏

来自分类Dev

单击加载图像-角度

来自分类Dev

单击按钮后重新加载数据表

来自分类Dev

确保页面已完全加载后,javascript单击按钮

来自分类Dev

角度方式:单击按钮后显示或隐藏元素

来自分类Dev

在.hover()上加载按钮,但每个子元素动态加载

来自分类Dev

单击后动态更改按钮上的名称

来自分类Dev

单击md对话框按钮后执行特定组件

来自分类Dev

单击页面加载上的HTML按钮/链接

来自分类Dev

单击删除按钮后如何自动重新加载更新的数据

来自分类Dev

单击按钮后网站不会重新加载

来自分类Dev

单击按钮后 jQuery/JavaScript 加载 div 背景图像

来自分类Dev

单击 5 次后单击事件禁用按钮上的按钮

来自分类Dev

如何通过单击按钮 angular 4 加载子组件

来自分类Dev

单击按钮时加载组件

来自分类Dev

如何在单击按钮时以角度有条件地加载组件

Related 相关文章

热门标签

归档