检测ngModel中的更改以及setter和getter

时间:2017-12-14 07:24:04

标签: angular typescript

我的一个组件出了问题。 (缩短的)代码如下:

 export class SampleComponent implements OnChanges, OnInit {
      @Input('options') public innerOptions: any[] = [];  
      @Input('value') public innerValue: any = null;
      @Input() public config: ListConfigModel = new ListConfigModel();  

      constructor(private elementRef: ElementRef) {
      }

  public ngOnInit() {    
    console.log(this.value);
    console.log(this.options);
  } 

  public ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);    
  }

  public get options(): any {
    let emptyEntry: any = (this.allowEmptyValue) ? [this.emptyEntry] : [];
    let validOptions = emptyEntry.concat((this.innerOptions !== null) ? this.innerOptions : []);

    return validOptions;
  }

  public set options(options: any) {
    this.innerOptions = options;
  }

  get value(): any {
    return this.innerValue;
  };

  set value(value: any) {
    if (value !== this.innerValue) {
      this.innerValue = value;
      this.onValueSelected();
    }
  }

  public writeValue(value: any): void {
    if (value !== this.innerValue) {
      this.innerValue = value;      
    }
  }
}

使用

在另一个组件内部调用该组件
<sample [(ngModel)]="currentEntity.value" [options]="options"></sample>

value参数是父组件内对象的普通参数,而选项是订阅 现在我的问题:
当我的sampleComponent被初始化时,该值为null,但选项是可用的。如果ngOnChanges第一次触发,则值仍为null,并且只在内部传递一个空数组。当第二次和最后一次调用ngOnChanges时,选项将设置为包含数据的实际数组,但值仍为null。一段时间后,看似神奇的值从父组件跳转到正确的值。 writeValue被触发但未被检测到。所以我的问题是如何检测值何时从null变为实际值。我试图在它出现时尽快建立一些字符串。试图使用ngDoCheck,但这搞砸了我的表现。还尝试在writeValue中触发字符串构建函数,这会导致无限循环。

请告诉我如何检测价值变化

0 个答案:

没有答案