通过单击 mat-select 中的复选框，不显示内容

Posted 2023-03-13

【中文标题】通过单击 mat-select 中的复选框，不显示内容

【英文标题】：By clicking on the checkboxes in the mat-select the contents are not displayed

【发布时间】：2020-11-26 11:09:30

【问题描述】：

我开发了一个选择，其中包含 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',
  ];

【参考方案1】：

如果您使用的是formControl，您可以移除值绑定[(value)]="selectedValues" 并尝试发出selectionChange 事件

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

如果您需要，您也可以将$event 传递给handleChange() 函数：

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

【讨论】：

感谢您的提示，但我以不同的方式解决了这个问题。我更改了我的代码，这就是它的工作原理。我将输出打包到另一个 中，然后使用 *ngFor="let selectedValue of selectedValues" 进行迭代。