如何在角度输入中添加垫选择

Question

我正在寻找在我的输入字段中添加垫选择的方法，但是由于某些原因，当我单击箭头时，它不起作用并且没有向我显示所有列表。

我具有自动完成功能，通常当用户开始输入时，它会显示所有要选择的列表，但是我也尝试添加mat-select，以便用户只需单击箭头并从列表中进行选择，而不必先输入内容

我遵循下面的stackblitz示例（我的复选框不需要），但是我的复选框有点不同，并且我还具有文本输入和自动完成功能，所以我不确定为什么我不能再用单击箭头时，当前代码以及下拉列表均未显示。

任何建议或帮助都会得到真正的体现。

https://stackblitz.com/edit/angular-material-v9-mat-select-with-mat-chip-list?file=src%2Fapp%2Fselect-multiple-example.html

TimeZoneInfo

Answer 1

在这种情况下，我不会使用芯片列表和自动完成功能的组合。

我认为，您真正需要的是具有选项的自动完成功能，其中包含用于多选的复选框。尝试做这样的事情。

<mat-form-field class="example-full-width">
    <input type="text" placeholder="Select Users" aria-label="Select Users" matInput [matAutocomplete]="auto" [formControl]="userControl">
  <mat-hint>Enter text to find users by name</mat-hint>
</mat-form-field>

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let user of filteredUsers | async" [value]="selectedUsers">
        <div (click)="optionClicked($event, user)">
            <mat-checkbox [checked]="user.selected" (change)="toggleSelection(user)" (click)="$event.stopPropagation()">
                {{ user.firstname }} {{ user.lastname }}
            </mat-checkbox>
        </div>
    </mat-option>
</mat-autocomplete>

完整示例：

https://stackblitz.com/edit/angular-sx79hu?embed=1&file=app/multiselect-autocomplete-example.html