时间戳

首页 > 解决方案 > 根据下拉值隐藏字段（角度）

angular - 根据下拉值隐藏字段（角度）

问题描述

希望有人可以帮助新的 Angular 用户。

当我从 VehicleType 下拉字段中选择特定值时，我试图隐藏 engineNumber 字段。也许有人有一个很好的技巧。

我尝试了几种方法，但我无法成功，也许一组新鲜的眼睛会有所帮助。

我已经尝试过查看文档，尝试了来自不同来源的几种不同方法，但没有运气

请参阅我的组件 html。

  <div class="col-md-3" *ngIf="vehicleTypeWithIcons">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Vehicle Type'"></app-trans>
        </mat-label>
        <mat-select [formControl]="formVehicleType" [(value)]="riskValue.vehicleTypeId" required
          (selectionChange)="selectedVehicleChanged(riskValue.vehicleTypeId)">
          <mat-option *ngFor="let vehicleType of vehicleTypeWithIcons" [value]="vehicleType.id">
            <mat-icon><img src="{{vehicleType.iconImagePath}}"></mat-icon>&nbsp;&nbsp;&nbsp;&nbsp;
            <!--{{vehicleType.description}}-->
            <app-trans [phrase]="vehicleType.description"></app-trans>
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>

    <!-- Vehicle Body Type -->
    <div class="col-md-3" *ngIf="vehicleBodyTypes && vehicleBodyTypes.length > 0">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Vehicle Body Type'"></app-trans>
        </mat-label>
        <mat-select [formControl]="formVehicleBodyType" [(value)]="riskValue.vehicleBodyTypeId" required
          (selectionChange)="selectionChangeVehicleBodyType()">
          <mat-option *ngFor="let vehicleBodyType of vehicleBodyTypes" [value]="vehicleBodyType.id">
            <app-trans [phrase]="vehicleBodyType.description"></app-trans>
            <!--{{vehicleBodyType.description}}-->
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>

    <!-- Vehicle Make -->
    <div class="col-md-3">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Vehicle Make'"></app-trans>
        </mat-label>
        <input matInput type="text" [(ngModel)]="riskValue.vehicleMake" #ctrl="ngModel" [readonly]="readOnly" required>
      </mat-form-field>
    </div>

    <!-- Vehicle Model -->
    <div class="col-md-3" *ngIf="!readOnly">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Vehicle Model'"></app-trans>
        </mat-label>
        <input matInput type="text" [(ngModel)]="riskValue.vehicleModel" #ctrl="ngModel" [readonly]="readOnly" required>
      </mat-form-field>
    </div>

    <!-- Model Year -->

    <div class="col-md-3">
      <app-numeric-year-selector [readOnly]="readOnly" [header]="'Year'" [(numeric)]="riskValue.modelYear">
      </app-numeric-year-selector>
    </div>
  </div>
  <div class="row">

    <!-- Registration No. -->

    <div class="col-md-3" *ngIf="!readOnly">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Registration No.'"></app-trans>
        </mat-label>
        <input matInput type="text" [(ngModel)]="riskValue.registrationNumber" #ctrl="ngModel" [readonly]="readOnly"
          required>
      </mat-form-field>
    </div>

    <!-- Engine No. -->

    <div class="col-md-3">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Engine No.'"></app-trans>
        </mat-label>
        <input matInput type="text"  [(ngModel)]="riskValue.engineNumber" #ctrl="ngModel" [readonly]="readOnly" required>
      </mat-form-field>
    </div>

标签： angular

解决方案

formVehicleType.value 返回一个 id。所以ngIf必须与一个 id 进行比较。

 <div class="col-md-3" *ngIf="formVehicleType.value!=='INSERT SPECIFIC VALUES ID HERE'">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Engine No.'"></app-trans>
        </mat-label>
        <input matInput type="text"  [(ngModel)]="riskValue.engineNumber" #ctrl="ngModel" [readonly]="readOnly" required>
      </mat-form-field>
    </div>

或添加(onSelectionChange)="changeInteraction(vehicleType)"到mat-option通过字符串检查

<div class="col-md-3" *ngIf="vehicleTypeWithIcons">
  <mat-form-field appearance="outline">
    <mat-label>
      <app-trans [phrase]="'Vehicle Type'"></app-trans>
    </mat-label>
    <mat-select [formControl]="formVehicleType" [(value)]="riskValue.vehicleTypeId" required>
      <mat-option *ngFor="let vehicleType of vehicleTypeWithIcons" [value]="vehicleType.id" (onSelectionChange)="changeInteraction(vehicleType)">
        <mat-icon><img src="{{vehicleType.iconImagePath}}"></mat-icon>&nbsp;&nbsp;&nbsp;&nbsp;
        <!--{{vehicleType.description}}-->
        <app-trans [phrase]="vehicleType.description"></app-trans>
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

在 TS File 中创建一个函数

changeInteraction(vehicleType:any):any{
  this.selectedVehicleType = vehicleType.description
}

向发动机编号添加条件

 <div class="col-md-3" *ngIf="selectedVehicleType!=='INSERT SPECIFIC VALUES STRING HERE'">
      <mat-form-field appearance="outline">
        <mat-label>
          <app-trans [phrase]="'Engine No.'"></app-trans>
        </mat-label>
        <input matInput type="text"  [(ngModel)]="riskValue.engineNumber" #ctrl="ngModel" [readonly]="readOnly" required>
      </mat-form-field>
    </div>

推荐阅读