角度根据mysql记录创建formarray实例

Question

我在 mysql 数据库中有一些记录。我想在基于mysql行的formarray中添加formcontrols。如果我传递我的 mysql 成功数据，我会收到错误消息“无法读取未定义的属性‘控件’”。如果我将静态对象传递给 formarray，那么代码运行良好。

我在 ngOnInit 的控制台中记录了面粉列表。但是我在console.log 中得到了未定义的响应。

我的ts文件代码如下

import { FormGroup, FormControl, FormArray, FormBuilder, Validators } from '@angular/forms'
@Component({
  selector: 'app-grain-flour-list',
  templateUrl: './grain-flour-list.page.html',
  styleUrls: ['./grain-flour-list.page.scss'],
})
export class GrainFlourListPage implements OnInit {

  form: FormGroup;
  packagesArray: FormArray;
  sampledata
  add_cart_data
  flour_list
  id
  price
  temp_quantity
  product_id
  quantity
  category_id
  Flours_list
  constructor(public navCtrl: NavController, private fb: FormBuilder,
    public route: ActivatedRoute, public router: Router, public authservice: AuthService) {


    this.route.queryParams.subscribe(params => {
        this.category_id = params.id;

        this.authservice.flour_list(this.category_id).subscribe((data) => {
          this.Flours_list = data
          this.flour_list = this.Flours_list.data

        })
      })



  }
  ngOnInit() {

    this.form = new FormGroup({

      sections: new FormArray(this.flour_list.map(item => {
        const group = this.initSection();
        group.patchValue(item);
        return group;
      }))
    });

  }

  initSection() {
    return new FormGroup({
      category_id: new FormControl(''),
      price: new FormControl(''),
      name: new FormControl('')

    });
  }

  onEventSubmit() { }




  getSections(form) {
    return form.controls.sections.controls;
  }



}

Answer 1

问题可能是，flour_list 的数据仅在您的页面呈现后才出现。也就是说，ngOnInit() 被执行，并且 Form 和 FormArray 在页面加载后立即被初始化，然后只有数据被分配给 flour_list em>。

你可以试试，在ngOnInit()里面调用authservice，然后在subscribe()函数里面初始化Form，如下：

import { FormGroup, FormControl, FormArray, FormBuilder, Validators } from '@angular/forms'
@Component({
  selector: 'app-grain-flour-list',
  templateUrl: './grain-flour-list.page.html',
  styleUrls: ['./grain-flour-list.page.scss'],
})
export class GrainFlourListPage implements OnInit {

  form: FormGroup;
  packagesArray: FormArray;
  sampledata
  add_cart_data
  flour_list
  id
  price
  temp_quantity
  product_id
  quantity
  category_id
  Flours_list
  constructor(public navCtrl: NavController, private fb: FormBuilder,
    public route: ActivatedRoute, public router: Router, public authservice: AuthService) {

  }
  ngOnInit() {

    this.route.queryParams.subscribe(params => {
        this.category_id = params.id;

        this.authservice.flour_list(this.category_id).subscribe((data) => {
          this.Flours_list = data
          this.flour_list = this.Flours_list.data

          this.form = new FormGroup({

            sections: new FormArray(this.flour_list.map(item => {
              const group = this.initSection();
              group.patchValue(item);
              return group;
            }))
          });

        })
      })


  }

  initSection() {
    return new FormGroup({
      category_id: new FormControl(''),
      price: new FormControl(''),
      name: new FormControl('')

    });
  }

  onEventSubmit() { }




  getSections(form) {
    return form.controls.sections.controls;
  }



}