Angular 如何通过选择“角度”选项来显示输入字段？_Angular_Angular Material

Angular 如何通过选择“角度”选项来显示输入字段？

angular angular-material

Angular 如何通过选择“角度”选项来显示输入字段？,angular,angular-material,Angular,Angular Material,这里我有一个物料原生选择，在这个选择下拉列表中有两个选项（%and number）when%选项当时我想按%显示折扣输入字段，当我选择数字选项当时我想按数字显示折扣输入字段如何通过选择选项显示输入字段 <div> <mat-form-field> <input matInput placeholder="Enter Price" type="number" [(ngModel)]="newObj.newPrice" name="newPrice">

这里我有一个

物料原生选择

，在这个选择下拉列表中有两个选项（%and number）when%选项当时我想按%显示折扣输入字段，当我选择数字选项当时我想按数字显示折扣输入字段如何通过选择选项显示输入字段

<div>
  <mat-form-field>
    <input matInput placeholder="Enter Price" type="number" [(ngModel)]="newObj.newPrice" name="newPrice">
  </mat-form-field>

  <mat-form-field>
    <select matNativeControl>
      <option value="percentagewise">%</option>
      <option value="numberwise">Number</option>
    </select>
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Enter Discount By %" [(ngModel)]="newObj.newDiscountByPercentage" name="newDiscountByPercentage">
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Enter Discount By Number" type="number" [(ngModel)]="newObj.newDiscountByNumber" name="newDiscountByNumber">
  </mat-form-field>  
</div>


%
数

您可以使用

*ngIf

，但首先需要在

上定义ngModel
，选择以获得双向绑定
，然后在*ngIf
中使用它的变量
<mat-form-field>
    <select matNativeControl [(ngModel)]="discountType">
      <option value="percentagewise">%</option>
      <option value="numberwise">Number</option>
    </select>
  </mat-form-field>

  <mat-form-field *ngIf="discountType == 'percentagewise'" >
    <inputmatInput placeholder="Enter Discount By %" [(ngModel)]="newObj.newDiscountByPercentage" name="newDiscountByPercentage">
  </mat-form-field>

  <mat-form-field *ngIf="discountType == 'numberwise'" >
    <input matInput placeholder="Enter Discount By Number" type="number" [(ngModel)]="newObj.newDiscountByNumber" name="newDiscountByNumber">
  </mat-form-field>


%
数

您还应该在component.ts
文件中定义discountType
，以避免编译过程中出现错误。阅读有关*ngIf
指令的更多信息您可以使用*ngIf
，但首先您需要在上定义ngModel
以获得双向绑定
，然后在*ngIf
中使用它的变量
<mat-form-field>
    <select matNativeControl [(ngModel)]="discountType">
      <option value="percentagewise">%</option>
      <option value="numberwise">Number</option>
    </select>
  </mat-form-field>

  <mat-form-field *ngIf="discountType == 'percentagewise'" >
    <inputmatInput placeholder="Enter Discount By %" [(ngModel)]="newObj.newDiscountByPercentage" name="newDiscountByPercentage">
  </mat-form-field>

  <mat-form-field *ngIf="discountType == 'numberwise'" >
    <input matInput placeholder="Enter Discount By Number" type="number" [(ngModel)]="newObj.newDiscountByNumber" name="newDiscountByNumber">
  </mat-form-field>


%
数

您还应该在component.ts
文件中定义discountType
，以避免编译过程中出现错误。阅读有关*ngIf
指令的更多信息