Angular SetValue 在 NgOnInit 中不起作用

Question

我想将值设置为表单，但在第一次打开此页面时需要，setValue 在NgOnInit 中不起作用，它与onSubmitUpdate() 函数一起使用。我也是angular的新手，如果有错误的地方更健康的代码，我想警告你。

组件.ts

         import { Component, OnInit } from '@angular/core';
         import { FormBuilder } from '@angular/forms';
         import { FoodApiService } from 'src/app/food-api.service';

     @Component({
       selector: 'app-about-us-admin',
       templateUrl: './about-us-admin.component.html',
       styleUrls: ['./about-us-admin.component.css']
     })
     export class AboutUsAdminComponent implements OnInit {

      dataH : any[] = []

      updateFormData = this.fb.group({
        aboutTitle : [''],
        aboutContent : [''],
        aboutHeaderImg : [''],
        aboutImg : [''],
        aboutTitleHomePage : [''],
        aboutContentHomePage : [''],
        aboutBackgroungImgHomePage : [''],
        aboutImgHomePage : ['']
        })

        constructor( private apiService : FoodApiService , private fb : FormBuilder) { } 

        ngOnInit(): void {

           this.apiService.getAboutUsData()
            .subscribe(data => {console.log(data), this.dataH.push(data) })

           this.updateFormData.get('aboutTitle')?.setValue(this.dataH[0][0].about_title);
        }

        onSubmitUpdate(){

          console.log(this.dataH[0][0].about_title)
        }
       }

.HTML

 <app-admin-header></app-admin-header>

 <main style="margin-top: 58px">
     <div class="container pt-4">
        <form style="margin-bottom: 40px;" [formGroup]='updateFormData' 
              enctype="multipart/form-data" (ngSubmit)="onSubmitUpdate()">
     <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">About Title</label>
      <input type="text" class="form-control" id="exampleFormControlInput1"  
        formControlName='aboutTitle' >
     </div>
     <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">About Image</label>
      <input type="file" class="form-control" id="exampleFormControlInput1" >
      <img style="max-width: 300px;" src="../../../assets/images/{{dataH[0][0].about_img}}" 
      class="img-fluid" alt="" formControlName='aboutImg'>
    </div>
    <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">About Header Backgroung</label>
      <input type="file" class="form-control" id="exampleFormControlInput1" 
      formControlName='aboutHeaderImg' >
      <br><div id="emailHelp" class="form-text">Preview</div> <br>
      <img style="max-width: 300px;" src="../../../assets/images/{{dataH[0] 
       [0].about_Page_img}}" class="img-fluid" alt=""><be>
     </div>
     <div class="mb-3">
      <label for="exampleFormControlTextarea1" class="form-label">About Content</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" 
      formControlName='aboutContent'></textarea>
    </div>
    <br>
    <hr>
    <br>
    <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">About Title (Home Page) 
     </label>
      <input type="text" class="form-control" id="exampleFormControlInput1"  
       formControlName='aboutTitleHomePage' >
    </div>
    <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">About Image (Home Page)</label>
      <input type="file" class="form-control" id="exampleFormControlInput1"  
      formControlName='aboutImgHomePage'>
      <br><div id="emailHelp" class="form-text">Preview</div> <br>
      <img style="max-width: 300px;" src="../../../assets/images/{{dataH[0] 
     [0].about_homePage_img}}" class="img-fluid" alt=""><br>
    </div>
    <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">About Backgroung Image (Home 
       Page)</label>
      <input type="file" class="form-control" id="exampleFormControlInput1"  
       formControlName='aboutBackgroungImgHomePage'>
      <br><div id="emailHelp" class="form-text">Preview</div> <br>
      <img style="max-width: 300px;" src="../../../assets/images/{{dataH[0] 
        [0].about_homePage_BackgroundImg}}" class="img-fluid" alt=""><br>
    </div>
     <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">About Content (Home Page) 
      </label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" 
      formControlName='aboutContentHomePage'></textarea>
    </div>        

    <button type="submit" class="btn btn-primary">Update</button>
  </form>
  {{updateFormData.value | json}}
</div>
</main>

Answer 1

this.apiService.getAboutUsData() 是一个异步操作。您甚至在异步操作完成之前就将值设置为表单元素。

所以尝试在subscribe 方法中设置值。

第二次初始化ngOnint里面的表单

import {
  Component,
  OnInit
} from '@angular/core';
import {
  FormBuilder,
  FormGroup
} from '@angular/forms';
import {
  FoodApiService
} from 'src/app/food-api.service';

@Component({
  selector: 'app-about-us-admin',
  templateUrl: './about-us-admin.component.html',
  styleUrls: ['./about-us-admin.component.css']
})
export class AboutUsAdminComponent implements OnInit {
  dataH: any[] = [];
  updateFormData: FormGroup;

  constructor(private apiService: FoodApiService, private fb: FormBuilder) {}

  ngOnInit(): void {
    this.updateFormData = this.fb.group({
      aboutTitle: [''],
      aboutContent: [''],
      aboutHeaderImg: [''],
      aboutImg: [''],
      aboutTitleHomePage: [''],
      aboutContentHomePage: [''],
      aboutBackgroungImgHomePage: [''],
      aboutImgHomePage: ['']
    });

    this.apiService.getAboutUsData().subscribe(data => {
      console.log(data);
      this.updateFormData.controls.aboutTitle.setValue(data[0][0].about_title);
      this.dataH.push(data);
    });
  }

  onSubmitUpdate() {
    console.log(this.dataH[0][0].about_title);
  }
}