Как получить данные из объекта, который вводится из родительского компонента.

Question

У меня есть родительский компонент, который получает объект данных из сервиса и сохраняет его в значении: item.

Далее, путем привязки html я отправляю его дочернему компоненту:

<app-employee-form *ngIf="!showLoader" [employee]="item"></app-employee-form>

Inдочерний компонент У меня есть входная аннотация, и я получил значение сотрудника:

@Input() employee: Employee;

И в этом пункте моя проблема начинается.Когда я пытаюсь использовать эти данные для:

ngOnInit() {
console.log('Test ->', this.employee);
console.log('Test for name -> ', this.employee.name);}

У меня в консоли:

Test -> {"id":1,"name":"Wanda","surname":"Smith","type":"sdfkmsd","selected":false
Test for name ->  undefined

Я не понимаю, почему я не могу получить данные из имени свойства (илилюбое другое свойство в этом случае).Кто-нибудь может мне помочь?

Answer 1

Спасибо всем за помощь.Ваши идеи дают мне одну идею.Я проверяю это, и объект, который я имею в дочернем компонентном классе, является STRING.Я объявил его как Employee, но, как и в ts / js, во время выполнения все может быть по-другому: (.

Так что решение выглядит примерно так:

 (JSON.parse(this._employee.toString()) as Employee).name

Я думаю, что при вводе мы можемотправлять только встроенные простые классы, такие как строка, число и т. д. (как во всех примерах:))

Я хочу добавить, что это решение делает доступным значение в каждом хуке жизненного цикла, который упоминался здесь: onInit, OnCHange, ngAfterViewInit

Answer 2

Возможно ли, что item станет пустым после console.log('Test ->', this.employee);?Вы можете попробовать это:

ngOnInit() {
console.log('Test ->', this.employee);
console.log('Test for name -> ', this.employee.name);
console.log('Test ->', this.employee);
}

Если сотрудник не определен в третьем выводе, то он может быть очищен в родительском компоненте.Если это так, вы можете обновить ngIf на родительском элементе, чтобы показывать только тогда, когда item имеет значение.

<app-employee-form *ngIf="!showLoader && item" [employee]="item"></app-employee-form>

Answer 3

Для этой области вы можете использовать угловой крючок ngOnChange в вашем дочернем компоненте, чтобы дождаться загрузки входных данных и после этого что-то с ними сделать.

Документация: https://angular.io/api/core/OnChanges

Пример:

ngOnChanges(changes:SimpleChanges) { 
            for (let propName in changes) {     
                let change = changes[propName];     
                let curVal = JSON.stringify(change.currentValue);           
                let prevVal = JSON.stringify(change.previousValue);
                console.log(curVal);   
                console.log(prevVal); 
            } 
        }

Answer 4

Проблема в том, что у вас еще нет данных.

То, что вы видите в консоли, является оценочным значением, которое происходит позже.Если вы используете консоль chorm, то вы можете увидеть один желтый значок, который даст дополнительную информацию.

Fix

Доступ к этому значению в ngAfterViewInit.Если вы по-прежнему не можете получить доступ, возможно, возникла проблема с циклом Angualr Change Detector.Вы можете использовать setTimeout для того же.

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements AfterViewInit {

  public _employee;

  get employee(): any {
     return this._employee;
  }

  @Input("employee")
  set employee(employee: any) {
     this._employee= employee;
  }

  ngAfterViewInit() {
     console.log('Test ->', this._employee);
     console.log('Test for name -> ', this._employee.name);
  }
}

Answer 5

Потому что на данный момент данные еще не доступны.Попробуйте

if(this.employee) {
console.log(this.employee.name);
}