Question

我有一个角度为5的mat-select下拉菜单。我想要一个＆＃34;其他＆＃34;选项，如果选中，则显示带有手动输入的文本字段。我怎样才能做到这一点？我的想法是解决另一个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>

这取决于＆＃34;其他＆＃34;选项具有未定义（或空）value。

如何添加＆＃34;其他＆＃34;在Angular 5 / Material 2中选择mat-select

1 个答案: