Angular 2 Ngrx商店：更新數組

Question

我目前有一個基於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'); 

    } 

} 

Answer 1

您可以通過迭代你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({...})我不知道WH在表單控件在你那裏，所以你需要添加他們...喜歡的東西：

this.fb.group({myFormControlName1: x.myProperty1, myFormControlName2: x.myProperty2....})