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; 
    } 
}