我收到此错误消息: 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}];
}
}
form.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)
})
);
});
}
有完整的代码表单。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();
}
}
感谢您的帮助
答案 0 :(得分:2)
由于您将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 };
答案 1 :(得分:0)
dbData是DataModel[]
,您以this.dbData.ITEMS
的身份访问它(肯定不存在)。所以要么必须
dbData : DataModel;
this.dbData.ITEMS...
或
dbData : DataModel[];
this.dbData.forEach(dbItem => {
dbItem.ITEMS...
})
我还注意到DataModel
里面有一个数组,我想你的意思是要有一个DataModel而不是一个数组
答案 2 :(得分:-1)
这是源代码,其中的错误在红色中可以看到。