Question

我正尝试在onSelectionChange上附加select事件，如下所示：

   <mat-form-field class="full-width languageDiv" appearance="outline" *ngIf="languages && selectedLanguage">
          <mat-label>Language</mat-label>
          <mat-select [(value)]="selectedLanguage">
            <mat-option *ngFor="let language of languages" [value]="language" (onSelectionChange)="onLangChange($event)">
              {{language}}
            </mat-option>
          </mat-select>
        </mat-form-field>

这是onLangChange方法

 onLangChange(e) {
    console.log(e);
        const languageSelected = e.source.value;
        if( this.selectedLanguage !== languageSelected){

            this.selectedLanguage = (languageSelected);

        }
  }

这是stackblitz链接： StackBlitz

对于选择中的每个更改，onLangChange都会被调用两次，这弄乱了我的其他逻辑（此处为了简化代码而未提及）。为什么这个叫两次？

Answer 1

您应按以下方式将ngModel与ngModelChange一起使用，原因是在mat-option上使用onSelectionChange，而应在mat-select上使用。最好使用ngModelChange，如下所示，

 <mat-select [(ngModel)]="selectedLanguage" (ngModelChange)="onLangChange($event)">
    <mat-option *ngFor="let language of languages" [value]="language">
        {{language}}
    </mat-option>
</mat-select>

DEMO STACKBLITZ

Answer 2

我建议@Sajeetharan回答。（为防止选择相同，compareWith）

事件值onLangChange($event)具有用于指示面板是否打开的值。
因此，如果您需要允许选择相同的选项，
请参阅Trigger event on re-selecting same value on mat-select。

Demo for this

Answer 3

2 个事件被触发，键值不同，名为 isUserInput 和布尔值。

true，如果是选择事件

false，如果是取消选择事件

在您的函数中，尝试添加如下所示的 if 条件

onLangChange(e) {
    console.log(e);
    if (e.isUserInput) { // isUserInput is true
        const languageSelected = e.source.value;
        if( this.selectedLanguage !== languageSelected){

            this.selectedLanguage = (languageSelected);

        }
     }
  }

onSelectionChange在Angular中被调用两次

3 个答案: