如何处理组件中的异步输入？

Question

我遇到了问题ngOnChange.我有以下组件:

@Component({
    selector:'user-table',
    template: `...`,

})

export class UserTable implements OnChanges{
    @Input() users: User[];
    years:string[];
    constructor(private _usersCollection:UsersCollection){
    }

    ngOnChanges(){
     if (this.users.length)
       {this.years =this._usersCollection.createYearsArray(this.users)}
    }
}

但是,如果条件仅被检查一次 - 何时this.users尚未从服务器获取,因此其长度为0.我如何找到处理这种异步输入的解决方案？

更新数组,就像我设置以下日志时一样:

    console.log('ON FIRST INIT' , this.programs);
    this.years = this._usersCollection.createYearsArray();
    console.log(this.years);
    setInterval(()=>{
        console.log('IN INTERVVAL' , this.programs);
    },1000);

控制台输出是:

ON FIRST INIT []
UsersTable.component.ts:21 []
UsersTable.component.ts:23 IN INTERVVAL [Object, Object, Object, Object]

Answer 1

如果在输入属性发生更改时不需要执行任何逻辑(例如,您只在模板绑定中使用该属性),则无需执行任何操作.Angular会自动将新值从父级传播到input属性.

如果要在输入属性更改时执行某些组件逻辑,请使用ngOnChanges(),只要有任何组件输入属性发生更改,就会调用该逻辑.

由于Angular用于===检测变化(嗯,也有一些特殊处理NaN),这意味着

• 对于引用类型(数组,对象,日期等),引用(即数组,对象等引用)必须更改.例如, myArray = someNewArray;
  如果只有数组中的项目发生更改,ngOnChanges()则不会调用.例如,对于诸如的改变myArray[0].name = newName;,ngOnChanges()不被称为.
• 对于原始类型(数字,布尔值,字符串),这只是意味着值必须更改.例如, myNumber = 5;或myNumber = newNumber;

另一个选择是使用实现自己的更改检测逻辑ngDoCheck().请参阅此答案以获取示例.每次检查组件或指令的输入属性时,都会调用该生命周期钩子.通过执行自定义检查,使用它来扩展更改检测" - 来自lifecyle hooks.md