Angular 2 - 从FormArray创建对象数组

时间:2017-08-10 05:32:34

标签: typescript angular2-forms formarray

我有一个包含FormArray人的表单。然后,people数组包含一个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)

但无论我如何尝试获取数据,它都表示我的列表未定义。例如,以下内容返回它无法读取undefined的“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。

2 个答案:

答案 0 :(得分:1)

对于遇到此问题的任何其他人,我能够通过根据“人物”的值创建一个新的表单数组来解决它。表格数组。然后使用表单数组函数将表单值映射到对象值。然后我重复了地址数组的过程。

adoRs.Open strSQL, adoCon
If Not adoRS.BOF Then
    'If not _BOF_ we have records so load the first record
    adoRs.MoveFirst

    Do While Not adoRS.EOF 
        'Process records here
        '.
        '.
        '.
        adoRS.MoveNext
    Loop
Else
    Msgbox "No records returned."
End If 

答案 1 :(得分:1)

很高兴你能让它发挥作用!

以为我会发布我将如何做到这一点。

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