在我的组件中,我收到一张卡片来编辑并发出PUT请求:
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private formBuilder: FormBuilder,) {
this.cardToEdit = navParams.get('cardToEdit');
this.editCRCCardForm = this.formBuilder.group({
thing: ['', Validators.required],
responsibilities: ['', Validators.required],
collaborators: [''],
});
}
ionViewDidLoad() {
console.log(this.cardToEdit);
this.editCRCCardForm.patchValue(this.cardToEdit);
...
}
updateCard(formData){
console.log(formData)
}
控制台打印(这是要编辑的卡):
{"id":8,"responsibilities":[{"id":7,"name":"Name","card":8},{"id":8,"name":"ISBN","card":8}],"collaborators":[{"id":4,"name":"","card":8}],"thing":"Book"}
编辑卡片的表格:
<form [formGroup]="editCRCCardForm" (ngSubmit)="updateCard(editCRCCardForm.value)" autocomplete="off">
<!-- Title -->
<ion-item>
<ion-label>Thing*</ion-label>
<ion-input type="text" formControlName="thing"></ion-input>
</ion-item>
<ion-item>
<ion-label>Attributes and operations*</ion-label>
<ion-textarea formControlName="responsibilities"></ion-textarea>
</ion-item>
<ion-item>
<ion-label>Related things</ion-label>
<ion-input type="text" formControlName="collaborators"></ion-input>
</ion-item>
<button ion-button full type="submit" [disabled]="!editCRCCardForm.valid">Add</button>
</form>
现在我的patchValue正确地将Book放入了thing字段,但是对于其他两个字段,我在我的模板中得到了[object Object] .
我该如何解决这个问题?例如 . 我本质上想在职责中填充 Name ISBN
(在textarea中,以空格分隔的值)
UPDATE:
我试过类似的东西
ionViewDidLoad() {
this.editCRCCardForm.patchValue({thing: this.cardToEdit.thing});
for (let responsibility of this.cardToEdit.responsibilities){
this.editCRCCardForm.patchValue({responsibilities: responsibility.name});
}
}
这部分成功只打印数组中的最后一个值,即ISBN而不是NAME ISBN