如何在 Angular 5/Material 2 中添加“其他”选项到 mat-select

Question

我有一个角 5 的垫选择下拉菜单。我想要一个“其他”选项，如果选中，它会显示一个带有手动输入的文本字段。我怎样才能做到这一点？ 我的想法是解决另一个 ngModel 布尔字段，然后它允许 *ng-if 显示文本字段，但即使它可以工作（我不知道如何）它看起来也不是很优雅....

<mat-form-field>
    <mat-select [(ngModel)]="regime" name="regime-input">
        <mat-option [value]=1>daily</mat-option>
        <mat-option [value]=7>weekly</mat-option>
        <mat-option [value]=30>monthly</mat-option>
        <mat-option [value]=0>bei Bedarf</mat-option>
        <mat-option >other</mat-option>
    </mat-select>
</mat-form-field>

Answer 1

您可以使用简单的引用来有条件地显示输入：

<mat-form-field>
    <!-- Notice the "#regimeWidget"! -->
    <mat-select [(ngModel)]="regime" name="regime-input" #regimeWidget>
        <mat-option [value]=1>daily</mat-option>
        <mat-option [value]=7>weekly</mat-option>
        <mat-option [value]=30>monthly</mat-option>
        <mat-option [value]=0>bei Bedarf</mat-option>
        <mat-option >other</mat-option>
    </mat-select>
</mat-form-field>

<ng-container *ngIf="!regimeWidget.value">
    <!-- Add your input here -->
    <span>You selected "Other"</span>
</ng-container>

这依赖于具有未定义（或空）value 的“其他”选项。