Angular 错误TS2339:属性';项目';不存在于类型';数据模型[]和#x27;

Angular 错误TS2339:属性';项目';不存在于类型';数据模型[]和#x27;,angular,forms,ionic-framework,model,Angular,Forms,Ionic Framework,Model,我收到以下错误消息: TS2339:类型“DataModel[]”上不存在属性“ITEMS” 我在IONIC/ANGULAR中工作,用一个模型做一个反应式表单,从HTTP获取数据 有模型(model.ts): export class DataModel { public ITEMS: any[]; constructor(public NAME: string, public QUANTITY: Array<string>) { this.ITEM

我收到以下错误消息: TS2339:类型“DataModel[]”上不存在属性“ITEMS”

我在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)
        })
      );
    });
  }
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();
  }
}

感谢您的帮助

因为您将
公共数据库数据:数据模型[]
定义为一个数组,所以您应该将其视为一个数组

我猜您是想将其定义为
publicdbdata: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();
  }
}
最后,你应该改变:

公共数据库数据:数据模型[];
->
公共数据库数据:数据模型;


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

这是您可以在红色代码中看到的错误源代码


dbData是一个
DataModel[]
,您可以通过
this.dbData.ITEMS
访问它,但它肯定不存在。因此,您必须

dbData : DataModel;

this.dbData.ITEMS...


我还注意到
DataModel
里面有一个数组,我想你是想有一个DataModel而不是数组

什么是
public dbData:DataModel[];
如果我这样声明
public dbData:DataModel[];
或者像这样
public dbData:DataModel;
我有同样的错误消息。更糟糕的是:(当声明为
dbData:DataModel
时,您会遇到什么错误?
error TS2322:Type'any[]不可分配给Type'DataModel'。
并且
属性'ITEMS'在Type'any[]中丢失。
现在我收到了此错误消息
error TS2322:Type'{ITEMS:any[];}'不可分配给类型“DataModel”。
属性“NAME”在类型“{ITEMS:any[];}”中丢失。
如果要复制它并在angular或ionic下编译,则有代码:我创建了数据模型来创建dbData结构。我希望它看起来像这样:
dbData:any={ITEMS:[{NAME:'',QUANTITY:['']};
因此定义您的
dbData:DataModel=newdatamodel(''',[''])
我通过从订阅中获取如下值来解决问题
this.obsubscription=this.storageService.dbSubject.subscripte((值:any)=>{}
而不是这样,它是
this.obsSubscription=this.storageService.dbSubject.subject((值:any[])=>{}
我喜欢这样,如果不是这样,我在模板中得到了一个错误,因为异步数据非常感谢!!!
dbData : DataModel[];

this.dbData.forEach(dbItem => {

   dbItem.ITEMS...
})