Передать изменяемый массив в поле дочернего компонента @Input

Question

Я пытаюсь передать массив дочернему компоненту. Массив определяется в методе подписки хука жизненного цикла родительского компонента onInit.

Родительский компонент:

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

@Component({
  selector: 'selector-parent',
  templateUrl: 'parent.component.html'
})

export class ParentComponent implements OnInit {

  array: [];

  constructor() { }

  ngOnInit() {
    this.appDataService.getValues()
      .subscribe(
        value => {
          value.item
            .filter(loaded => !this.array.some(existing => existing.key === loaded.key))
            .forEach(loaded => { this.array.push(loaded) })
        }
      )
  }
}

Дочерний компонент:

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

@Component({
  selector: '[selector-child]',
  templateUrl: 'child.component.html'
})

export class ChildComponent implements OnInit {

  @Input() inputArray: [];

  constructor() { }

  ngOnInit() {
    console.log(this.inputArray)
  }
}

Связывание: <tr selector-child [inputArray]="array"></tr>

К сожалению, консольный журнал на inputArray оказывается неопределенным. Я попытался использовать ngOnChanges в дочернем компоненте, но по какой-то причине он не распознает изменения в родительском компоненте. Подумайте об использовании службы для передачи данных, если не существует более простого способа решения проблемы.

Answer 1

Вы должны инициализировать массив в родительском компоненте:

array: [] = [];

Answer 2

Я не вижу ngOnChanges в вашем дочернем компоненте.Также убедитесь, что вы делаете это так, как указано в угловых документах.https://angular.io/guide/component-interaction#intercept-input-property-changes-with-ngonchanges