Question

我有两个不同的下拉菜单（作为a cihld组件实现），内部包含相同的数据。

如果这两个选定值相同，我想显示mat-error。在错误垫上，我调用了一个函数：

areValuesTheSame() {
  if (this.form.controls['value1'].value && this.form.controls['value2'].value) {
      return this.form.controls['value1'].value === this.form.controls['value2'].value;
}

我认为我将得到结果为是/假，并根据发生错误的情况执行以下操作：

<mat-error *ngIf="areValuesTheSame()">Selected values has to be the same!</mat-error>

但是事实是，它不断为我返回值，而不是一次返回（真或假）。

如果我尝试在console.log中进行检查，则控制台将结果打印n次（如无限循环）。

我在这里做错了什么？

Answer 1

实际上，您的代码没有错。它是如何工作的。它会自动运行更改检测，并在选中更改后运行您的功能。

检查以下内容：angular2 - infinite loop when i call method from a Angular 2 class inside template

Answer 2

在每个更改检测周期都会调用您的函数，为避免这种情况，请在* ngIf中放入一个布尔值，然后在value1和value2的值更改时进行更改，例如，在（keyup）事件中更改

<input formControlName="value1" (keyup)="areSame()" />
<input formControlName="value2" (keyup)="areSame()" />
<mat-error *ngIf="!sameBool">Selected values has to be the same!</mat-error>

TS：

areSame(){
 if(this.form.controls['value1'].value === this.form.controls['value2'].value)
   sameBool= true;
}

编辑：使用注释中提到的验证器甚至更好。

如何检查两个不同的子下拉列表在Angular 7中是否具有相同的值？

2 个答案: