Ошибка TS2339: свойство «ITEMS» не существует для типа «DataModel []»

Question

Я получаю это сообщение об ошибке: TS2339: свойство 'ITEMS' не существует для типа 'DataModel []'

Я работаю в IONIC / ANGULAR и создаю реактивную форму с моделью и получаю данныеиз HTTP.

Есть модель (model.ts):

export class DataModel {
    public ITEMS: any[];

    constructor(public NAME: string, public QUANTITY: Array<string>) {
        this.ITEMS = [{NAME, QUANTITY}];
    }
}

Есть часть кода, откуда происходит ошибка формы.page.ts

  setItems() {
    const control = this.itemsForm.controls.items as FormArray;
    this.dbData.ITEMS.forEach(element => {
      control.push(
        this.formBuilder.group({
          name: element.NAME,
          quantity: this.setItem(element)
        })
      );
    });
  }

Полный код form.page.ts

export class Form2Page implements OnInit, OnDestroy {
  obsSubscription: Subscription;
  itemsForm: FormGroup;

  public dbData: DataModel[];


  constructor(
    private formBuilder: FormBuilder,
    private storageService: FormStorageService
  ) {}

  ngOnInit() {
    // Get data from DB
    this.storageService.getDBData();
    this.obsSubscription = this.storageService.dbSubject.subscribe(
      (value: any[]) => {
        this.dbData = value;

    // Creating the FORM
        this.initForm();
        this.setItems();
      },
      error => {
        console.log('erreur');
        console.log(error);
      }
    );
  }

  initForm() {
    this.itemsForm = new FormGroup({
      items: new FormArray([])
    });
  }

  setItems() {
    const control = this.itemsForm.controls.items as FormArray;
    this.dbData.ITEMS.forEach(element => {
      control.push(
        this.formBuilder.group({
          name: element.NAME,
          quantity: this.setItem(element)
        })
      );
    });
  }

  setItem(value) {
    const array = new FormArray([]);
    value.QUANTITY.forEach(element => {
      array.push(this.formBuilder.control(element));
    });
    return array;
  }

  findFieldArray(field: any): FormArray {
    return this.itemsForm.get(field) as FormArray;
  }

  addNewItems() {
    const control = this.itemsForm.controls.items as FormArray;
    control.push(
      this.formBuilder.group({
        name: '',
        quantity: this.formBuilder.array([this.formBuilder.control('')])
      })
    );
  }

  addNewItem(item: FormGroup) {
    (item.get('quantity') as FormArray).push(this.formBuilder.control(''));
  }

  removeItem(item: FormGroup, qtyIndex: number, itemIndex: number) {
    (item.get('quantity') as FormArray).removeAt(qtyIndex);
  }

  removeItems(itemIndex: number) {
    const form = this.itemsForm.get('items') as FormArray;
    form.removeAt(itemIndex);
  }

  checkArray(itemIndex: number) {
        // Get the quantity array lenght to display the remove ITEMS button
        return ((this.itemsForm.get('items') as FormArray)
        .at(itemIndex)
        .get('quantity') as FormArray).length;
  }

  onFormSubmit() {
    console.log('Submit : ', this.itemsForm.value);
  }

  ngOnDestroy() {
    this.obsSubscription.unsubscribe();
  }
}

Спасибо за помощь

Answer 1

, поскольку вы определили public dbData: DataModel[] как массив, вы должны обращаться с ним как с одним.

Полагаю, вы хотели определить его как public dbData: DataModel, тогда он будет работать при вызове this.dbData.ITEMS.forEach(element => {

Вот полное изменение:

export class Form2Page implements OnInit, OnDestroy {
  obsSubscription: Subscription;
  itemsForm: FormGroup;

  public dbData: DataModel;  // #1 change


  constructor(
    private formBuilder: FormBuilder,
    private storageService: FormStorageService
  ) {}

  ngOnInit() {
    // Get data from DB
    this.storageService.getDBData();
    this.obsSubscription = this.storageService.dbSubject.subscribe(
      (value: any[]) => {
        this.dbData = { ITEMS: value };  // #2 change

    // Creating the FORM
        this.initForm();
        this.setItems();
      },
      error => {
        console.log('erreur');
        console.log(error);
      }
    );
  }

  initForm() {
    this.itemsForm = new FormGroup({
      items: new FormArray([])
    });
  }

  setItems() {
    const control = this.itemsForm.controls.items as FormArray;
    this.dbData.ITEMS.forEach(element => {
      control.push(
        this.formBuilder.group({
          name: element.NAME,
          quantity: this.setItem(element)
        })
      );
    });
  }

  setItem(value) {
    const array = new FormArray([]);
    value.QUANTITY.forEach(element => {
      array.push(this.formBuilder.control(element));
    });
    return array;
  }

  findFieldArray(field: any): FormArray {
    return this.itemsForm.get(field) as FormArray;
  }

  addNewItems() {
    const control = this.itemsForm.controls.items as FormArray;
    control.push(
      this.formBuilder.group({
        name: '',
        quantity: this.formBuilder.array([this.formBuilder.control('')])
      })
    );
  }

  addNewItem(item: FormGroup) {
    (item.get('quantity') as FormArray).push(this.formBuilder.control(''));
  }

  removeItem(item: FormGroup, qtyIndex: number, itemIndex: number) {
    (item.get('quantity') as FormArray).removeAt(qtyIndex);
  }

  removeItems(itemIndex: number) {
    const form = this.itemsForm.get('items') as FormArray;
    form.removeAt(itemIndex);
  }

  checkArray(itemIndex: number) {
        // Get the quantity array lenght to display the remove ITEMS button
        return ((this.itemsForm.get('items') as FormArray)
        .at(itemIndex)
        .get('quantity') as FormArray).length;
  }

  onFormSubmit() {
    console.log('Submit : ', this.itemsForm.value);
  }

  ngOnDestroy() {
    this.obsSubscription.unsubscribe();
  }
}

Наконец, вы должны изменить:

public dbData: DataModel[]; -> public dbData: DataModel;

this.dbData = value -> this.dbData = { ITEMS: value };

Answer 2

dbData - это DataModel[], вы получаете доступ к нему как this.dbData.ITEMS, которого точно не существует. так что либо вы должны

dbData : DataModel;

this.dbData.ITEMS...

или

dbData : DataModel[];

this.dbData.forEach(dbItem => {

   dbItem.ITEMS...
})

также я заметил, что DataModel имеет массив внутри, я думаю, вы хотели иметь одну DataModel, а не массив

Answer 3

Исходный код с ошибкой, которую вы видите в коде красного цвета.

Исходный код с ошибкой