基于下拉值隐藏字段(Angular)

Question

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

我试图隐藏引擎编号字段，当我从车辆类型下拉字段选择一个特定的值。也许有人有一个好技巧。

我已经尝试了几种方法，但都不成功，也许换个新视角能帮上忙。

我试着看了文档，从不同的来源尝试了几种不同的方法，没有运气

请参阅我的组件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>

Answer 1

formVehicleType。取值re屯和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文件中创建一个函数

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>