typescript PatchForm在API调用Angular 8后无法工作

kmpatx3s  于 2023-06-07  发布在  TypeScript
关注(0)|答案(1)|浏览(180)

我正在使用补丁值来更新我的表单,但我无法做到这一点,我的视图没有更新,尽管我已经尝试了两种方法async/await和observable。虽然我找到了一个变通的办法,使用设置超时,但这不是一个适当的解决方案。
先谢谢你了。
方法1使用箭头函数和async/await(promise)

constructor(
    public storage: Storage,
    public route: Router,
    public navCtrl: NavController,
    public toastController: ToastController,
    public alertController: AlertController,
    public loadingController: LoadingController,
    public formBuilder: FormBuilder,
    public dataInteractionService: DataInteractionService,
    public router: ActivatedRoute
) {
    super(storage, route, navCtrl, toastController, alertController, loadingController);
    this.initialize_Sub_for_Param();
}
    
initialize_Sub_for_Param() {
    this.router.queryParams.subscribe(params => {
        debugger;
        this.initialize_Form();
        if (this.route.getCurrentNavigation().extras.state) {
            debugger;
            this.petDetails = this.route.getCurrentNavigation().extras.state.user;
            console.log(this.petDetails, "petDetails")
            this.get_Data_animal(this.petDetails);

        }    
    });
}    

ngOnInit() {}

initialize_Form() {
    this.edit_animal_Form = this.formBuilder.group({
        animal_image: ['', Validators.required],
        animal_name: ['', Validators.required],
        species_id: ['', Validators.required],
        breed_id: ['', Validators.required],
        date_of_birth: ['', Validators.required],
        electronic_number: ['', Validators.required],
    })
}
get_Data_animal = async (form_Value) => {
    try {
        let breed_Species_data = await this.dataInteractionService.get_Animal_Spcices().toPromise();
        this.get_species = breed_Species_data['species'];
        this.get_breeds = breed_Species_data['breeds'];
        debugger;

        //Workaround using settimeout but I know this is not a proper solution//

        setTimeout(() => {
            this.edit_animal_Form.patchValue(form_Value);
            console.log(this.edit_animal_Form.value);
        }, 100);
    } catch (error) {
        console.log(error)
    }
}

方法2使用可观测量

constructor(
    public storage: Storage,
    public route: Router,
    public navCtrl: NavController,
    public toastController: ToastController,
    public alertController: AlertController,
    public loadingController: LoadingController,
    public formBuilder: FormBuilder,
    public dataInteractionService: DataInteractionService,
    public router: ActivatedRoute
) {
    super(storage, route, navCtrl, toastController, alertController, loadingController);
    this.initialize_Sub_for_Param();
}
    
initialize_Sub_for_Param() {
    this.router.queryParams.subscribe(params => {
        this.initialize_Form();
        if (this.route.getCurrentNavigation().extras.state) {
            this.petDetails = this.route.getCurrentNavigation().extras.state.user;
            this.get_Data_animal(this.petDetails);

        }    
    });
}    

ngOnInit() {}

initialize_Form() {
    this.edit_animal_Form = this.formBuilder.group({
        animal_image: ['', Validators.required],
        animal_name: ['', Validators.required],
        species_id: ['', Validators.required],
        breed_id: ['', Validators.required],
        date_of_birth: ['', Validators.required],
        electronic_number: ['', Validators.required],
    })
}

get_Data_animal = async (form_Value) => {
    try {
        this.dataInteractionService.get_Animal_Spcices().subscribe(res => {
            this.get_species = breed_Species_data['species'];
            this.get_breeds = breed_Species_data['breeds'];
            this.edit_animal_Form.patchValue(form_Value);

        });    
    } catch (error) {
        console.log(error)
    }    
}
0pizxfdo

0pizxfdo1#

我不知道你的代码里发生了什么。但这里有一个公平的例子,我用它来修补我的表单中的值。我可以给予你一个基本概念。在收到值后立即修补表单。例如:

getOrderById(id) {
    this._order.getOrderWithId(id).subscribe((res: any) => {
      this.orderForm.patchValue(res);
    });
  }

在这种情况下,您不必使用setTimeout或任何其他async await。

相关问题