在 Angular 中确定 'change in value for a component' 是否是检测到的更改的结果
Determine in Angular whether a 'change in value for a component' is a result of a detected change
我们正在使用 DevExtreme 的 'switch' 组件,并已设置该组件的 onValueChanged
事件以执行某些操作。
但是,当绑定对象的 属性 值更改时(由于更新基础数据),也会触发此事件。
但我们只想在用户更改开关值时执行操作。
那么如何检测更改是否是 ChangeDetection 更新的结果?
Html-代码:
<dx-form [formData]="myobject" [colCount]="6">
<dxi-item dataField="myobjectprop" editorType="dxSwitch" [editorOptions]="{ value:myobject.myobjectprop, onValueChanged:someaction }" cssClass="switch-right-label">
<dxo-label text="my property" location="right" alignment="left">
</dxo-label>
</dxi-item>
</dx-form>
ts-code
import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Component({
selector: 'app-test-my-object',
templateUrl: './test-my-object.component.html',
styleUrls: ['./test-my-object.component.scss']
})
export class TestMyObjectComponent implements OnInit {
myobject: MyObject;
onObjectChanged: BehaviorSubject<MyObject>;
constructor() {
this.onObjectChanged = new BehaviorSubject(new MyObject());
}
ngOnInit(): void {
this.onObjectChanged
.subscribe(newmyobject => {
this.myobject = newmyobject;
});
}
someaction = (): Promise<boolean> => {
// Do something when the data changed
// - but not when change is a result of using using 'changeObject' <= how to know that???
return new Promise((resolve, reject) => { /*...*/ });
}
changeObject(): void {
const obj = new MyObject();
obj.myobjectprop = !this.myobject.myobjectprop;
this.onObjectChanged.next(obj);
}
}
export class MyObject {
myobjectprop: boolean;
}
终于找到了解决方案(至少在使用 DevExteme 组件时)。
基本上需要检查,是否设置(或未设置)事件对象的 event
属性 是否已设置(或未设置)。
示例:
someaction = (e): Promise<boolean> => {
if (e.event === undefined) {
// event was triggered by code
return Promise.resolve(false);
}
return new Promise((resolve, reject) => { /*...*/ });
}
我们正在使用 DevExtreme 的 'switch' 组件,并已设置该组件的 onValueChanged
事件以执行某些操作。
但是,当绑定对象的 属性 值更改时(由于更新基础数据),也会触发此事件。
但我们只想在用户更改开关值时执行操作。
那么如何检测更改是否是 ChangeDetection 更新的结果?
Html-代码:
<dx-form [formData]="myobject" [colCount]="6">
<dxi-item dataField="myobjectprop" editorType="dxSwitch" [editorOptions]="{ value:myobject.myobjectprop, onValueChanged:someaction }" cssClass="switch-right-label">
<dxo-label text="my property" location="right" alignment="left">
</dxo-label>
</dxi-item>
</dx-form>
ts-code
import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Component({
selector: 'app-test-my-object',
templateUrl: './test-my-object.component.html',
styleUrls: ['./test-my-object.component.scss']
})
export class TestMyObjectComponent implements OnInit {
myobject: MyObject;
onObjectChanged: BehaviorSubject<MyObject>;
constructor() {
this.onObjectChanged = new BehaviorSubject(new MyObject());
}
ngOnInit(): void {
this.onObjectChanged
.subscribe(newmyobject => {
this.myobject = newmyobject;
});
}
someaction = (): Promise<boolean> => {
// Do something when the data changed
// - but not when change is a result of using using 'changeObject' <= how to know that???
return new Promise((resolve, reject) => { /*...*/ });
}
changeObject(): void {
const obj = new MyObject();
obj.myobjectprop = !this.myobject.myobjectprop;
this.onObjectChanged.next(obj);
}
}
export class MyObject {
myobjectprop: boolean;
}
终于找到了解决方案(至少在使用 DevExteme 组件时)。
基本上需要检查,是否设置(或未设置)事件对象的 event
属性 是否已设置(或未设置)。
示例:
someaction = (e): Promise<boolean> => {
if (e.event === undefined) {
// event was triggered by code
return Promise.resolve(false);
}
return new Promise((resolve, reject) => { /*...*/ });
}