Angular用-ngDoCheck监听数字属性(不是@Input)的值更改?

我有一个FormGroup汇率数组,即ratesMainArray@Input,从父级到子级。每当父组件中其长度发生变化时,我就通过ngOnChangesspecial键值在normal中对其进行过滤,并将过滤后的数组的length值存储在两个本地属性specialRatesnormalRates的类型当然是number。 我需要听听长度值的变化,但是ngOnChanges仅对父数组的变化做出反应。 我已经开始使用ngDoCheck来实际检测过滤后的数组值变化,但是当我尝试对过滤后的数组长度做出反应时,我收到了错误Error trying to diff '2'. Only maps and objects are allowed

这是代码的简化版本:

...
@Input() ratesMainArray: FormGroup[];
specialRates: number;
normalRates: number;
differ: any;

constructor(private differs: KeyValueDiffers) {
    this.differ = differs.find({}).create();
  }

ngDoCheck() {
    const changes = this.differ.diff(this.specialRates);
      if (changes) {
         changes.forEachAddedItem(r => console.log('added ' + r.currentvalue));
                   }
}

async ngOnChanges(changes: SimpleChanges) {

    if ((this.ratesMainArray && this.ratesMainArray.length) 
         && (changes && changes.ratesMainArray && changes.ratesMainArray.currentvalue.length)) {

this.specialRates= this.ratesMainArray.filter(t => t.controls.isspecialRate.value === true).length;
this.normalRates= this.ratesMainArray.filter(t => t.controls.isspecialRate.value === false).length;

}

// ideally,I would like to do something like this:
// if (this.specialRates.valueChanges or changes.specialRates.currentvalue) {
// do somthing
// } else {
// do something else
// }

}

我不一定需要使用ngDoCheck,但是由于它正在检测过滤后的数组更改,因此我认为这是必须的方法。为了清楚起见,在尝试private cd: ChangeDetectorRef之前,我还尝试过使用this.cd.detectChanges();ngDoCheck运气不好。

感谢您的帮助!

ly0110 回答:Angular用-ngDoCheck监听数字属性(不是@Input)的值更改?

您可以使用'set'分析在@Input()中收到的数据

specialRates: number;
normalRates: number;
differ: any;
private _ratesMainArray: FormGroup[];
get ratesMainArray(): FormGroup[] {
   return this._ratesMainArray;
}
@Input() set ratesMainArray(value: FormGroup[]){
    if(value) {
      this._ratesMainArray = value;
this.specialRates= this.ratesMainArray.filter(t => t.controls.isSpecialRate.value === true).length;
this.normalRates= this.ratesMainArray.filter(t => t.controls.isSpecialRate.value === false).length;
    }
}

constructor(private differs: KeyValueDiffers) {
   this.differ = differs.find({}).create();
}

这是@Input()中的另一个get / set示例: Angular2 @Input to a property with get/set

本文链接:https://www.f2er.com/3110188.html

大家都在问