Блог

Когда я использую angular material mat-select, я хочу вызвать функцию, чтобы консоль регистрировала имя выбранного элемента. Но почему консоль регистрирует текущую и предыдущую? Это мой код:

 <mat-form-field appearance="fill" style="margin-top: 1rem; width: 100px;">
    <mat-label>Groups</mat-label>
         <mat-select>
              <mat-option *ngFor="let name of groupNames" [value]="name 
                 (onSelectionChange)="getActivitiesInGroup(name)">
                    {{ name }}
              </mat-option>
         </mat-select>
</mat-form-field> 
  

 groupNames = ['A','D','T','C']
getActivitiesInGroup(name: string): void {
        console.log(name);
}
  

Итак, я сначала выбираю ‘A’ и соболезную журналу ‘A’, после этого я выбираю ‘T’, почему консоль сначала регистрирует ‘T’, а затем регистрирует ‘A’? Как я могу позволить консоли просто регистрировать ‘T’ во время второго выбора?

Какую версию Angular вы используете?

Angular 6 :

Вы должны использовать selectionChange событие на mat-select , а не mat-option :

 <mat-select name="countryString" [(value)]="selectedCountry" (selectionChange)="onSelectionChange(selectedCountry)"
  placeholder="Country">
  <mat-option [value]="'GB'">Great Britain</mat-option>
  <mat-option [value]="'US'">United States</mat-option>
  <mat-option [value]="'CA'">Canada</mat-option>
</mat-select>
  

Демонстрация на stackblitz:

https://stackblitz.com/edit/angular-mat-select-example-vqnv8h?file=src/app/app.component.html