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

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 示例，它展示了如何实现它。

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

有关角度材料造型的更多信息请参见此处。