[英]Angular 2 Ngrx Store: Updating Array
我目前有一個基於ngrx / store架構的angular2 CRM應用程序。 我具有CRUD功能,可以正常工作來更新,列出和添加客戶,並且使用ngrx / effects將所有客戶綁定到Firebase數據庫。
為了使智能組件與商店保持同步,我使用以下代碼。 再次一切正常,但是我不確定如何更新表單中的數組-請參見下面的代碼:-
這是我用商店中的數據更新表格的地方
if (this.customer) {
this.customerForm.get('name').setValue(this.customer.name);
this.customerForm.get('overview').setValue(this.customer.overview);
this.customerForm.get('imagePath').setValue(this.customer.imagePath);
console.log("ngOnChanges", this.customer);
}
我想對地址表單執行類似的操作,但是不確定如何執行上述操作以在表單中填充數組對象。 歡迎任何想法/建議
當我登錄下面的控制台時,我實際上有地址詳細信息,只需要知道如何將其放入表單對象即可。
Object
addresses: Array(2)
0:Object
1:Object
length:2
imagePath:"http://www.bytes.co.uk/application/themes/bytes/img/bytes-technology-group.svg"
name:"Bytes Technology Group Emirates LLC"
overview:"Kronos Re-Seller for the Middle East and GCC Countries and Egypt"
parentId:"-KcRRsAGRYASXNU3gO_F"
完整的客戶詳細信息智能組件
import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy, OnChanges } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators, FormControl } from "@angular/forms";
// Mojito Models
import { CustomerModel } from '../../models/customer-model';
import { AddressType } from '../../../shared/models/address.model';
@Component({
selector: 'mj-customer-detail',
templateUrl: './customer-detail.component.html',
styleUrls: ['./customer-detail.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CustomerDetailComponent implements OnInit, OnChanges {
@Input() customer: CustomerModel;
@Output() updatedCustomer: EventEmitter<CustomerModel> = new EventEmitter<CustomerModel>();
@Output() showView: EventEmitter<string> = new EventEmitter<string>();
@Output() customerId: EventEmitter<string> = new EventEmitter<string>();
customerForm: FormGroup;
addressForm: FormGroup;
addressTypes: AddressType[] = [
{ "id": 1, "name": "Work" },
{ "id": 2, "name": "Home" },
]
private newAddressGroup() {
return new FormGroup({
type: new FormControl,
street: new FormControl,
city: new FormControl,
country: new FormControl,
postalCode: new FormControl
})
}
get addresses() {
return (this.addressForm.get('addressGroups') as FormArray).controls;
}
constructor(private fb: FormBuilder) {
this.customerForm = this.fb.group({
name: [null, Validators.required],
overview: [null, Validators.required],
imagePath: [null, Validators.required],
});
this.addressForm = this.fb.group({
addressGroups: this.fb.array([])
});
}
ngOnChanges() {
if (this.customer) {
this.customerForm.get('name').setValue(this.customer.name);
this.customerForm.get('overview').setValue(this.customer.overview);
this.customerForm.get('imagePath').setValue(this.customer.imagePath);
console.log("ngOnChanges", this.customer);
}
}
ngOnInit() {
}
onAddAddressGroup() {
const fa = this.addressForm.controls["addressGroups"] as FormArray;
fa.push(this.newAddressGroup());
}
onSaveAddress() {
const addresses = this.addressForm.controls["addressGroups"].value;
this.customer.addresses = addresses;
this.onSaveCustomer();
}
onSaveCustomer() {
this.customer = Object.assign(this.customer, this.customerForm.value);
this.updatedCustomer.emit(this.customer);
this.showView.emit('list');
}
onDeleteCustomer() {
this.customerId.emit(this.customer.$key);
this.showView.emit('list');
}
goBack() {
this.showView.emit('list');
}
}
您可以通過迭代customer.addresses
的數據來設置值,並且可以縮短值的設置,而不是將每個值分別設置,可以將其縮短,例如:
ngOnChanges() {
if (this.customer) {
// set values in customerForm
this.customerForm.setValue({
name: this.customer.name,
overview: this.customer.overview;
imagePath: this.customer.imagePath
})
// set controls to addressForm, formArray
let control = <FormArray>this.addressForm.get('addressGroups');
this.customer.addresses.forEach(x => {
control.push(this.fb.group({...}))
})
}
}
請注意this.fb.group({...})
我不確定那里有什么表單控件,因此您需要附加它們...類似:
this.fb.group({myFormControlName1: x.myProperty1, myFormControlName2: x.myProperty2....})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.