Question

我有以下代码：

'<mat-form-field>
      <mat-select #Version >
        <mat-option value="1.36.0">1.36.0</mat-option>
        <mat-option value="1.42.0">1.42.0</mat-option>
        <mat-option value="1.43.5">1.43.5</mat-option>
        <mat-option value="1.44.2">1.44.2</mat-option>
      </mat-select>
</mat-form-field>'

问题是，用户可能不时需要添加新版本。因此，我想添加一个选项，使用户可以用键盘填充该字段中未列出的新版本。你们有什么想法要实现吗？

https://stackblitz.com/edit/angular-xxselg

https://angular-xxselg.stackblitz.io

Answer 1

首先，您需要创建新的字符串数组。并使用* ngFor。

您可以使用mat-input来获取新版本。mat-button可以用来更新数组。

看看这个Stackblitz exmaple，它展示了如何实现它。

顺便说一句，您的Stackblitz Example缺少角形材料样式。已添加："~@angular/material/prebuilt-themes/indigo-pink.css"; 在styles.css下。

有关角形材料样式Here的更多信息。

Answer 2

在寻找类似的解决方案时，据我所知，如果没有如上所述添加单独的输入字段，则mat-select并不能帮助您完成此处想要的操作，但是恕我直言，从用户体验来看，这是一个糟糕的解决方案透视。

如果您仅使用mat-autocomplete而不是mat-select，它将在单个控件中提供基本功能（选择或免费数据输入），例如查看“自动完成” example here

角度：在<mat-select>中添加“自由输入选项”

2 个答案: