將數據轉換爲angular2格式

Question

我正在嘗試將用戶數據提取回窗體，但我無法這樣做，請幫助我， 這裏是我的代碼。

我想要將數據加載到OnInit（）的編輯窗體中，我使用的是角4，後端是.Net MVC， ，並解釋了代碼中的錯誤。對於列表組件

代碼在此輸入代碼

`<table class="table table-hover"> 
    <thead> 
    <tr> 
     <th>Contact ID</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Phone </th> 
     <th>Email</th> 
    </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let contact of contacts"> 
      <td>{{ contact.ContactID }}</td> 
      <td>{{ contact.FirstName }}</td> 
      <td>{{ contact.LastName }}</td> 
      <td>{{ contact.Phone }}</td> 
      <td>{{ contact.Email }}</td> 
      <a [routerLink]="['/contactedit', contact.ContactID]">Edit</a> 
      <!-- <td><a (click) = "onEdit(contact.ContactID)" class="btn btn-primary" >Edit</a> </td> --> 
      <td><a (click) = "onDelete(contact.ContactID)" class="btn btn-primary" >Delete</a></td> 

     </tr> 
    </tbody> 
</table>` 

這裏是編輯表單組件

`<form 
    [formGroup] = "form" 
    (ngSubmit) = "onSubmit(form.value)"> 
    <div class="form-group"> 
    <label for="firstName">First Name</label> 
    <input type="text" class="form-control" id="FirstName" placeholder="Enter email" formControlName="FirstName"> 

    </div> 
    <div class="form-group"> 
    <label for="lastName">Last Name</label> 
    <input type="text" class="form-control" id="LastName" placeholder="Password" formControlName="LastName"> 
    </div> 


    <div class="form-group"> 
    <label for="phoneNumber">Phone Number</label> 
    <input type="tel" class="form-control" id="Phone" placeholder="Password" formControlName="Phone"> 

    </div> 
    <div class="form-group"> 
    <label for="email">Email</label> 
    <input type="email" class="form-control" id="Email" placeholder="Password" formControlName="Email" > 

    </div> 

    <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Update</button> 
    <button type="reset" class="btn btn-default">Clear</button> 
</form>` 

這裏的HTML是編輯表單component.ts的代碼

`import { Component , OnInit } from '@angular/core'; 
import { FormBuilder,Validators, FormGroup } from '@angular/forms'; 
import { Contact } from './contact.interface'; 

import { ActivatedRoute , Router } from '@angular/router'; 

import { MediaService } from './media.service'; 
import 'rxjs/add/operator/switchmap'; 
@Component({ 
    selector: 'my-media-form', 
    //moduleId: module.id, 
    templateUrl: 'app/media-form.component.html' 
}) 
export class MediaFormEditComponent implements OnInit { 
    id: string; 
    currentContact: Contact; 
    contactForm: FormGroup; 
    private sub: any; 
    form; 
    constructor(private router: Router, 
       private route : ActivatedRoute, 
      private formBuilder: FormBuilder, 
      private mediaService: MediaService){} 

    ngOnInit(){ 
     debugger; 
     this.form = this.formBuilder.group({ 
      FirstName: this.formBuilder.control('',Validators.required), 
      LastName: this.formBuilder.control('',Validators.required), 
      Email: this.formBuilder.control('', Validators.compose([Validators.required])), 
      Phone: this.formBuilder.control('',Validators.required)  
     }); 
     this.sub = this.route.params 
     .map(params => params['id']) 
     .switchMap(id => this.mediaService.getContactById(id)) 
      .subscribe((cont: Contact) => { 
       this.currentContact = cont; 

       this.contactForm.setValue({ 
        FirstName  : cont.FirstName, 
        LastName: cont.LastName, 
        Email: cont.Email, 
        Phone: cont.Phone 
       }); 
      }); 
    } 

    onSubmit(Data){ 
     this.mediaService.UpdateContact(Data) 
     .subscribe(data => this.router.navigate(['contacts'])); 
    } 
}` 

Answer 1

首先在循環之前創建一個數組（取數據後）：

let newFormArray: FormGroup[] = []; 

在你的循環：

newFormArray.push(this.fb.group({ FirstName: [cont[i].FirstName, Validators.required], LastName: [cont[i].LastName, Validators.required] //... 
})); 

然後，讓你的表單：

 this.form = this.fb.group({ 
     array: this.fb.array(newFormArray) 
    }) 

進口：import { FormControl, FormArray, FormGroup, FormBuilder, Validators } from '@angular/forms';