如何在 Angular 8 中检测 angular 中的值是由用户更改还是方法调用已更改它

Question

我有一个 select 元素，其中的值由 ngOnit 调用分配。

HTML：

<select name="duration" [(ngModel)]="exercisePlan.duration" (ngModelChange)="onChange($event)"> 
    <option *ngFor="let duration of durations" [value]="duration.value">{{duration.title}}</option> 
</select> 

TS：

durations =  [{ title: "15 seconds", value: 15 }, 
              { title: "30 seconds", value: 30 }, ...]

ngOnit() {
    this.exercisePlan.duration = durations[0];
}

onChange(event) {
    console.log("How to show that change is done by user but not by some method call");
}

因此，该值不是由用户分配的，而是通过某种方法（在本例中为 ngOnInit）提供的。

而当我从下拉列表中选择一个值时，如何知道用户是否从选择选项中进行了选择？

与假设类似，如果我在 HTML 中添加一个重置按钮并单击重置我更改了我的 Select 元素的值，那么如何在 onChange() 方法中区分更改是由用户完成还是由任何其他方法调用完成对该元素模型的更改？

Answer 1

嗨，我建议使用 FormControl。 我会粘贴正确的代码，然后我会解释。

ngOnit() {
      this.control.setValue(
        // value to set
        durations[0], 
        // this prevent the control from notify the change (optional)
        { emitEvent: false }
      );
    }

<select name="duration" [formControl]="control">
  <option value="">Select a value</option>
  <option *ngFor="let duration of durations" [ngValue]="duration.value">{{duration.title}}</option>
</select> 

在组件上：

valueDetection() {
this.formControl.valueChanges
      .subscribe(value => {
        // value is the value selected or assigned
        // here you can do logic
      });
}

在此示例中，FormControl 会在用户选择选项或通过方法代码时更改。 FormControl 是一个可观察对象，因此每次值更改时它都会被激活，您可以在订阅中控制与该更改关联的逻辑。 现在我会在这里做 2 个假设。

第一个是您希望在不触发更改的情况下更改代码。 这是由 setValue 方法中的值存档的。

其次，您要处理逻辑，这取决于它是否来自代码或不是更改。 这个很棘手。 为了知道更改是否来自代码，您必须检查 FormControl 的脏值和触摸值。 第二种选择是创建一个这样的对象：{ value: 'the value', fromCode: true} 并处理订阅上的第二个值

有关FormControl 的更多信息

有关选择的更多信息