使用* ngIf显示和隐藏部分的操作,div不会在按钮的第一次单击时被激活,而在第二次单击时被激活。 场景- 输入帧号并单击搜索按钮后,将进行一次http呼叫,将根据状态(是或否)检查接收到的号码,如果为false,则该部分应保持关闭状态,这意味着输入的数据有误,如果正确,则数据部分将打开并使用一些值进行修补。 以下是组件中的代码,我在其中检查响应中的状态是true还是false,一旦状态出现故障,就会显示通知。 问题-尽管满足条件为true,但我的ngif部分未显示,而是在第二次点击时显示
onSubmitVehicleDetails() {
console.log(this.vehdetails.status)
console.log(this.fetch_vehicle);
let formValue1: any = {
chassis_no: this.vehicleDetailsForm.value.chassis_no,
}
this.policyService.getVehicleNumber(formValue1)
.pipe()
.subscribe(vehdetails => {
this.displayModalPolicy(vehdetails),
console.log(this.vehdetails.status)
if(this.vehdetails.status === false){
this.fetch_vehicle = false;
console.log(this.fetch_vehicle)
}
else {
this.fetch_vehicle = true;
console.log(this.fetch_vehicle)
}
console.log('vehdetails: ', vehdetails); //
(error: any) => this.errorMessage = <any>error;
console.log(this.vehdetails.status)
}
)
}
displayModalPolicy(vehdetails): void {
this.vehdetails = vehdetails;
this.vehicleDetailsForm.patchValue({
model_name: vehdetails.data.model_name,
v_fuel: vehdetails.data.v_fuel,
v_yom: vehdetails.data.v_yom,
v_cc: vehdetails.data.v_cc,
variant_name: vehdetails.data.variant_name,
exshow_price: vehdetails.data.exshow_price,
engine_no: vehdetails.data.engine_no,
});
console.log(vehdetails);
// the data on the form
console.log(this.vehdetails.status)
console.log(this.fetch_vehicle)
}
这是HTML
<button mat-raised-button color="primary" type="button"
(click)="[onSubmitVehicleDetails()]">Search</button>
<p>
{{fetch_vehicle}}
</p>
</div>
</div>
<div *ngIf="fetch_vehicle">
<div class="form-group m-form__group row">
<div class="col-lg-6">
<img src="assets/app/media/img/logos/logo-1.png">
<label class="col-lg-4 col-form-label">
<h4>Vehicle Details</h4>
</label>
</div>