При нажатии на галочки в мате-выберите содержимое не отображается

Question

Я разработал выборку, которая содержит флажки в mat-option. При выборе желаемого флажка должен отображаться div, который привязан к соответствующей части параметра. Но когда я нажимаю на нее, ничего не отображается. Без флажков мой mat-select работает нормально. Вы знаете, где моя ошибка и как я могу ее решить?

Мой код:

HTML

<mat-form-field floatLabel="never">
  <mat-select [(value)]="selectedValues" formControlName="dashboardValue" placeholder="Auswählen" multiple>
     <mat-option *ngFor="let dashboardPosition of displayDashboardValues" [value]="dashboardPosition">
         {{ dashboardPosition.viewValue }}
      </mat-option>
   </mat-select>
</mat-form-field>

<div class="content-flows-in" *ngIf="selectedValues">
<div *ngFor="let selectedValue of selectedValues">
<div *ngIf="selectedValues['valuePositionType'] === 'test1'">Test 1</div>
<div *ngIf="selectedValues['valuePositionType'] === 'test2'">Test 2</div>
<div *ngIf="selectedValues['valuePositionType'] === 'test3'">Test 3</div>
</div>
</div>

TS

// For the form
  dashboardForm: FormGroup;
  selectedValues: any;

public displayDashboardValues = [
    {value:'position_1', valuePositionType: 'test1', viewValue:'Profit and Loss'},
    {value:'position_2', valuePositionType: 'test2', viewValue:'Cash'},
    {value:'position_3', valuePositionType: 'test3', viewValue:'Balance'},
  ];

Answer 1

Если вы используете formControl, вы можете удалить привязку значения [(value)]="selectedValues" и попробовать вместо этого создать событие selectionChange

<mat-select ... (selectionChange)="handleChange()" ...>

Если вам нужно, вы также можете передать $event в handleChange() функция:

<mat-select ... (selectionChange)="handleChange($event)" ...>