Почему я не могу получить данные из @input?

Здесь обновление

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}
0
задан OPV 4 March 2019 в 19:31
поделиться

2 ответа

Из шаблона ComponentA visitor проще всего сделать, если вы ожидаете значение для привязки visitor в дочерних компонентах, - добавить проверку *ngIf.

<app-visitor-component *ngIf="visitors.length" [visitors]="visitors"></app-visitor-component>

Это делает достоверную проверку значения visitors.length, которое будет оцениваться как false, пока сервисный вызов не вернет значение.

Также я бы порекомендовал вам переместить вызов службы в eventsService.view в ngOnInit из ComponentA и выйти из конструктора. Это также облегчает тестирование ComponentA.


Затем в дочернем компоненте для app-visitor

Из предыдущего ответа значение @Input () всегда неопределено

Это будет инициализироваться в ngOnInit, а не в конструкторе. ( Ознакомьтесь также с документацией Angular Life Cycle Hooks . )

Ваш код с использованием OnInit

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

@Component({
    selector: 'app-visitor-component',
    templateUrl: ''
})
export class ComponentAppVisitor implements OnInit {

    @Input() visitors: IVisitor[];
    constructor() {
    }

    ngOnInit() {
        console.log(this.visitors);
    }
}
0
ответ дан Igor 4 March 2019 в 19:31
поделиться

Angular не делает доступными данные @Input , как только создается компонент. То есть это не доступно во время constructor().

Если вы хотите отключить, когда @Input действительно отправлено (и повторно отправлено), используйте NgOnChanges:

import { Component, Input, OnChanges } from @angular/core';
@Component({
    selector: 'app-foo',
})
export class FooComponent implements OnChanges {
    @Input() visitors: IVisitor[];
    ngOnChanges() {
        if (this.visitors) {
            console.log(this.visitors)
            // do something with this.visitors
        }
    }
}

В качестве альтернативы вы можете использовать getter / setters для запуска чего-либо, когда оно отправляется Angular :

    private _visitors: IVisitor[];
    @Input() public set visitors(val: IVisitor[]) {
        this._visitors = val;
    }
    // Also, guarantee to always return an array
    public get visitors(): IVisitor[] {
        if (this._visitors) {
            return this._visitors;
        }
        return [];
    }
0
ответ дан amphetamachine 4 March 2019 в 19:31
поделиться
Другие вопросы по тегам:

Похожие вопросы: