angular создание экземпляров formarray на основе mysql записей

Question

У меня есть несколько записей в базе данных mysql. Я хочу добавить formcontrols в Formarray на основе mysql строк. Если я передаю свои mysql данные об успехе, я получаю сообщение об ошибке как «Невозможно прочитать свойство« control »из undefined». Если я передаю объект stati c в formarray, то код работает хорошо.

Я зарегистрировал flour_list в консоли на 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 .

Вы можете попробовать вызвать authservice внутри ngOnInit() и инициализировать форму внутри функции subscribe(), как показано ниже:

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;
  }



}