Angular 2 - 從FormArray創建對象的數組

Question

我有一個包含FormArray的人的表單。人們數組，那麼包含地址的FormArray這給我下面的JSON：

{ 
    "people": [ 
    { 
     "lastName": "Last-1", 
     "firstName": "First-1", 
     "middleName": "", 
     "addresses": [ 
     { 
      "street": "Person1 - Address1" 
     }, 
     { 
      "street": "Person1 - Address2" 
     } 
     ] 
    }, 
    { 
     "lastName": "Last-2", 
     "firstName": "Last-2", 
     "middleName": "", 
     "addresses": [ 
     { 
      "street": "Person2 - Address1" 
     } 
     ] 
    } 
    ] 
} 

現在我想要把這些「人」，從形式和創建一個Person對象的數組

export class ReportPerson {  
    lastName: string = ''; 
    firstName: string = ''; 
    middleName: string = ''; 
    addresses: PersonAddress[]; 
} 
export class PersonAddress { 
     street: string = ''; 
} 

當我使用console.log（form.get（'people'）.value）;我得到以下結果：

(2) [{…}, {…}]0: {lastName: "Last-1", firstName: "First-1", middleName: "", 
addresses: Array(2)} 
       1: {lastName: "Last-2", firstName: "Last-2", middleName: "", 
addresses: Array(1)}length: 2__proto__: Array(0) 

但是不管我如何獲取數據，它說我的列表是未定義的。例如，以下內容返回它不能讀取未定義的「lastName」。

save(form: any) { 
     var reportPersonList: ReportPerson[] = new Array(); 
     var people = form.get('people'); 

     for (let i = 0; i < people.length; i++) { 
      console.log(people[i].lastName); 
     } 
    } 
} 

我的問題是，從FormArray中的數據創建人物對象數組的正確語法是什麼？我知道這是我錯過的一些基本的東西，但我已經習慣了C＃，並且對於Typescript/Angular2來說是新的。

Answer 1

對於其他運行此問題的人，我可以通過從「人員」表單數組的值創建新的表單數組來解決此問題。然後使用表單數組函數將表單值映射到對象值。然後我重複了地址數組的過程。

save(form: any) { 
    var reportPersonList: ReportPerson[] = new Array(); 

    var people = form.get('people') as FormArray; 

    for (let i = 0; i < people.length; i++) { 
     var p = new ReportPerson; 
     p.lastName = people.at(i).get('lastName').value; 
     p.firstName = people.at(i).get('firstName').value; 
     p.middleName = people.at(i).get('middleName').value; 
     var addresses = people.at(i).get('addresses') as FormArray; 
     for (let j = 0; j < addresses.length; j++) { 
      var a = new PersonAddress; 
      a.street = addresses.at(j).get('street').value; 

      p.addresses.push(a); 
     }; 
     reportPersonList.push(p); 
    } 
    this.reportFormDataService.setReportPeople(reportPersonList); 

} 

Answer 2

很高興，你得到它的工作！

想到我會發布我將如何做到這一點，雖然。

let json = { 
    "people": [ 
    { 
     "lastName": "Last-1", 
     "firstName": "First-1", 
     "middleName": "", 
     "addresses": [ 
     { 
      "street": "Person1 - Address1" 
     }, 
     { 
      "street": "Person1 - Address2" 
     } 
     ] 
    }, 
    { 
     "lastName": "Last-2", 
     "firstName": "Last-2", 
     "middleName": "", 
     "addresses": [ 
     { 
      "street": "Person2 - Address1" 
     } 
     ] 
    } 
    ] 
} 

// for each person in the array, return a class instantiate 
json.people.map(person => { 
    return new Person().deserialize(person); 
}); 

// 
class Person(){ 

    public lastName: string; 
    public middleName: string; 
    public firstName: string; 
    public addresses: Array<any> 

    constructor(){ 
    this.addresses = new Array<string>(); 
    } 

    // note you could of just used the constructor, 
    // but its a personal preference to have a serialize and deserialize for data coming from the server in a json object type. 
    deserialize(data: any){ 
    this.lastName = data.lastName; 
    this.firstName = data.firstName; 
    this.middleName = data.middleName; 
    this.addresses = data.addresses; 
    } 
}