Question

使用* 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>

Angular6 * ng如果第一次单击搜索按钮时未加载div部分，则在第二次单击时加载

0 个答案: