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

我有一個包含FormArray的人的表單。人們數組，那麼包含地址的FormArray這給我下面的JSON：Angular 2 - 從FormArray創建對象的數組

{ 
    "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來說是新的。

來源

2017-08-10 Chachi_Arcola

如果您能夠在控制檯中獲取值，然後使用form.get（'people'）。value，然後在var people = form.get（'people'）。value中使用相同的值。 – Sreemat

這是任何錯字錯誤？ – Sreemat

我可以看到沒有錯字。智能感知不顯示任何。我可以無誤地添加/刪除數組。我可以獲取'people'的值和長度，但只要我嘗試遍歷數組並訪問屬性，就會得到未定義的錯誤。 –

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

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

}

來源

2017-08-14 02:12:20

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

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

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

來源

2017-08-14 02:26:48 Zze

這確實看起來很整潔。我會給它一個鏡頭。謝謝！ –

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

回答

相關問題