Блог

Если у меня есть свойство в родительском элементе и я хочу получить доступ к этому значению в компоненте, как я смогу это сделать?

Родитель:

 export class Animal{
  animalID ?: Array<number>;
{
 

Ребенок:

 import {Component, Input} from '@angular/core';

import {Animal} from '../animal';

@Component({
  selector: 'app-animal',
  templateUrl: './animal.component.html',
  styleUrls: ['./animal.component.css']
})
export class AnimalComponent {
  @Input() animal: Animal;
  public totalAnimals = animal.animalID.length;
  constructor() {
  }
}
 

HTML:

 <mat-card class="animal">
  <mat-card-header>
    <mat-card-title>{{animal.animalID}}</mat-card-title>
    <mat-card-subtitle>Total Animals: {{totalAnimals}}</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
  </mat-card-content>
</mat-card>
 

Однако он не может получить доступ к этому массиву numberAnimals, чтобы получить длину. Если бы кто-нибудь мог мне помочь, я был бы очень признателен!

Есть некоторые случаи, когда нам нужно уловить изменения ввода в дочернем компоненте, поэтому Angular предоставляет крюк жизненного цикла ngOnChanges.

Пожалуйста, удалите это начальное значение присвоения

 public totalAnimals: number = 0;
 

Добавьте ngOnChanges , чтобы определить, когда ваши входные данные изменятся

   ngOnChanges(changes: SimpleChanges) {
    if (changes.animal) {
      console.log(changes.animal.currentValue);
      // you can check object value and make appr. changes here
      this.totalAnimals = changes.animal.currentValue?.animalID.length;
    }
  }
 

Также добавьте значение в ngOnInit (), чтобы убедиться, что вы получите первое значение

 ngOnInit() {
  this.totalAnimals = animal?.animalID?.length;
}
 

Вы можете узнать больше о вводе здесь: обнаружение-ввод-изменение свойств

Потому что свойство «животное» используется до его инициализации. Вы должны установить значение в OnInit(). Если «животное» вызывается из API запроса, в это время инициализируется дочерний компонент, «животное» не определено, вы должны проверить это в крючке жизненного цикла ngOnChanges или проверить, что животное не пустое, чтобы показать дочерний компонент

 export class AnimalComponent implements OnInit {
 @Input() animal: Animal;
 public totalAnimals: number = 0;

 constructor() {}

 ngOnInit(): void {
  this.totalAnimals = animal?.animalID.length;
 }
}