单击按钮关闭 Angular Material mat-select 多选？答案

【问题标题】：Close Angular Material mat-select multiselect with a button click?单击按钮关闭 Angular Material mat-select 多选？
【发布时间】：2019-02-15 21:23:15
【问题描述】：

我想要一个多选下拉菜单，用户可以在其中单击“应用”按钮（位于下拉菜单中）以关闭菜单。使用 Angular Material 和 mat-select，有没有办法做到这一点？

我已经尝试向按钮添加关闭方法，但我得到了很多控制台错误，包括“control.registerOnDisabledChange 不是一个函数”，点击后，“control.markAsTouched 不是一个函数”

 <mat-form-field>
    <mat-select #toppings placeholder="Toppings" [formControl]="toppings" multiple>
      <mat-option *ngFor="let topping of toppingsList" [value]="topping">{{topping}}</mat-option>
      <button (click)="toppings.close()">Apply</button>
    </mat-select>
  </mat-form-field>

列表确实关闭了，但会出现控制台错误。

【问题讨论】：

除了危险的命名（输入和 formControl 都有名称“toppings”），您需要正确设置您的反应式表单。问题不在于按钮，而在于[formControl]="toppings"stackoverflow.com/questions/41474011/…。您可能希望使用 FormGroup 并在模板中访问 formControlName。

标签： angular angular-material

【解决方案1】：

正如评论所述，存在命名冲突。这行得通。

<mat-select #sl placeholder="Toppings" [formControl]="toppings" multiple>
        <mat-option *ngFor="let topping of toppingsList" [value]="topping">{{topping}}</mat-option>
        <button (click)="sl.close()">Apply</button>
    </mat-select>

堆栈闪电战 https://stackblitz.com/edit/angular7-material-primeng-template-1-hwuq4p?file=src%2Fapp%2Fapp.component.ts

【讨论】：