Question

我正在重写代码，因为使用IPAD时此代码不起作用。所以我认为我应该使用this.form.valuechanges（）而不是更改事件。

但是我被困住了，因为我不知道如何在valuechanges.subscribe（）中操纵DOM。

当文本区域中的值更改时，td背景色也会更改为其他颜色。

所以我想在this.form.valuechanges.subscribe（）中做同样的事情。

我可以在表内获取事件对象。但是我无法在this.form.valuechanges.subscribe（（val）=> {}）中获取事件对象。

案例1：使用更改事件（这是我想做的事）

HTML

<td mat-cell *matCellDef="let element; let index = index" class="column-order">
    <mat-form-field class="not-fix-width text-right" [formGroupName]="index">
        <input
            matInput
            type="text"
            (change)="valueChanged(element, $event, $event.target.value)"
            formControlName="order"
        />
    </mat-form-field>
</td>

组件

constructor(
    private platform: Platform, 
    private cd: ChangeDetectorRef, 
    private renderer: Renderer2) {}

valueChanged(parameter: any, event: any, order: string) {
    const copy = this.dataSource.data().slice();
    order = this.checkValue(order);
    parameter.order = order;
    this.dataUpdate(copy);
    // compare before value and after value
    if (this.isSameOldValue(parameter['name'], order)) { 
      this.renderer.removeClass(this.getHtmlElement(event.srcElement.parentElement), 'coloredBackground');
    } else {
      this.renderer.addClass(this.getHtmlElement(event.srcElement.parentElement), 'coloredBackground');
    }
}

getHtmlElement(elem: HTMLElement) {
    if (elem.parentElement.nodeName === 'TD') {
        return elem.parentElement;
    } else {
        return this.getHtmlElement(elem.parentElement);
    }
}

dataUpdate(copy: Param[]) {
    this.dataSource.update(copy);
    this.edited.emit({
        parameters: this.dataSource.data().slice(),
        code: this.value.code,
        index: this.index,
        invalid: this.form.invalid,
    });
 }

案例2：使用valuechanges方法（我认为这是更好的方法）

ngOnInit() {
    this.initForm();
    this.form.valueChanges
      .pipe(distinctUntilChanged())
      .pipe(takeUntil(this.onDestroy$))
      .subscribe((nowValue) => {
         // compare before value and after value
         // make flag for visible/invisible save button
         // this.changeDetectorRef.detectChanges()
      });
}

如何在form.valuechanges.subscribe（）中获取输入事件的HTMLElement？

0 个答案: