как показать поле ввода, выбрав опцию в угловых?

Question

Здесь у меня есть один material native select, и в этом раскрывающемся списке выберите два параметра (% и число), когда параметр% в это время я хочу показать скидку в поле ввода%, и когда я выбираю параметр числа в этот раз, я хочу показать скидку в поле ввода номера, как можно отобразить поле ввода, выбрав опцию?

<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>

Answer 1

Вы можете просто пойти с *ngIf, но сначала вам нужно определить ngModel на select, чтобы получить two-way binding, затем использовать его переменную в *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>

Также вы должны определить discountType в вашем файле component.ts, чтобы избежать ошибок при компиляции aot. Подробнее о директиве *ngIf здесь