Angular 2 auf der Bearbeitungsseite, Wert nicht im reaktiven Formularfeld

Question

Dies ist mein Produkt-edit-component.ts-Code. In diesem füge ich ein Produkt und seine Größen hinzu. Größe wird mehrfach sein. Produkt create.But wird, wenn i Produkt bearbeiten, ich will alle Wert wird auf seinen entsprechen Wert von JSON gesetzt wird

export class ProductEditComponent implements OnInit { 
    id: number; 
    routeId: any; 
    returnUrl: string; 
    errorMessage: any; 
    constructor(
     private http: Http, 
     private router: Router, 
     private route: ActivatedRoute, 
     private productService 
     : ProductService, 
     private flashMessageService: FlashMessagesService, 
     private fb: FormBuilder, 

    ) { } 


    @Input() product: FormGroup; 

    ngOnInit() { 
     this.routeId = this.route.params.subscribe(
     params => { 
      this.id = +params['id']; 
     } 
    ) 
     let postRequest = this.route.params.flatMap((params: Params) => 
     this.productService.getProduct(+params['id'])) 
     postRequest.subscribe(response => 
     this.product.setValue({ 
      title: response.json().title, 
      description: response.json().description, 
      sizes_attributes: response.json().sizes_attributes[0] 
     }) 
    ); 

     this.returnUrl = this.route.snapshot.queryParams['successUrl'] || '/products' 
     this.product = this.fb.group({ 
     title: ['', [Validators.required, Validators.minLength(5)]], 
     description: ['', [Validators.required, Validators.minLength(5)]], 
     sizes_attributes: this.fb.array([ 
      this.fb.group({ 
      size_number: ['', [Validators.required,Validators.maxLength(5)]], 
      }) 
     ]) 
     }) 
    } 

Diese Funktion ist für Add Größe von Vorlage:

initSize() { 
     return this.fb.group({ 
     size_number: ['', [Validators.required,Validators.maxLength(5)]], 
     }); 
    } 

    addSize() { 
     const control = <FormArray>this.product.controls['sizes_attributes']; 
     control.push(this.initSize()); 
    } 

Diese Funktion zum Entfernen der Größe aus der Vorlage:

removeSize(i: number) { 
     const control = <FormArray>this.product.controls['sizes_attributes']; 
     control.removeAt(i); 
    } 
    } 

Dies ist Vorlage für Bearbeiten-Seite:

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-10"> 
     <div class="margin-20"> 
     <h4>Add Product</h4> 
     </div> 

     <form [formGroup]="product" novalidate (ngSubmit)="update(product)"> 
     <div class="form-group"> 
      <label>Title</label> 
      <input type="text" class="form-control" formControlName="title"> 
      <small *ngIf="!product.controls.title.valid" class="text-danger"> 
      Name is required (minimum 5 characters). 
      </small> 
     </div> 

     <div class="form-group"> 
      <label>Description</label> 
      <input type="text" class="form-control" formControlName="description"> 
      <small *ngIf="!product.controls.description.valid" class="text-danger"> 
      Description is required (minimum 5 characters). 
      </small> 
     </div> 

     <div formArrayName="sizes_attributes"> 
      <div *ngFor="let size of product.controls.sizes_attributes.controls; let i=index" class="panel panel-default"> 
      <div class="panel-heading"> 
       <span>Size {{i + 1}}</span> 
       <span class="glyphicon glyphicon-remove pull-right" *ngIf="product.controls.sizes_attributes.controls.length > 1" (click)="removeSize(i)">X</span> 
      </div> 
      <div class="row" [formGroupName]="i"> 
       <div class="form-group col-md-6"> 
       <label>Size</label> 
       <input type="text" class="form-control" formControlName="size_number"> 
       <small [hidden]="product.controls.sizes_attributes.controls[i].controls.size_number.valid" class="text-danger"> 
        Size is required 
       </small> 
       </div> 
      </div> 
      </div> 
     </div> 

     <div class="margin-20"> 
      <a (click)="addSize()" style="cursor: default"> 
      Add another size + 
      </a> 
     </div> 
     <div class="margin-20"> 
      <button type="submit" class="btn btn-primary pull-right" [disabled]="!product.valid">Submit</button> 
     </div> 
     <div class="clearfix"></div> 

     </form> 
    </div> 
    </div> 
</div> 

Json Daten von API:

{ 
    "code": 200, 
    "id": 30, 
    "title": "43434", 
    "description": "343434", 
    "created_at": "2017-12-05T10:19:39.316Z", 
    "updated_at": "2017-12-05T10:19:39.316Z", 
    "user_id": 4, 
    "sizes_attributes": [ 
     { 
      "id": 58, 
      "size_number": "34", 
      "product_id": 30, 
      "created_at": "2017-12-05T10:19:39.317Z", 
      "updated_at": "2017-12-05T10:19:39.317Z" 
     }, 
     { 
      "id": 60, 
      "size_number": "77", 
      "product_id": 30, 
      "created_at": "2017-12-06T04:59:25.318Z", 
      "updated_at": "2017-12-06T04:59:25.318Z" 
     } 
    ] 
} 

Probleme:

Auf dem obigen Code Titel d Beschreibung wird auf Produktform festgelegt, aber die Größe der Daten wird nicht auf Größen festgelegt. attributes steuert form array. Bitte helfen

Answer 1

ngOnInit() { 
    this.routeId = this.route.params.subscribe(
     params => { 
     this.id = +params['id']; 
     } 
    ) 
    let postRequest = this.route.params.flatMap((params: Params) => 
    this.productService.getProduct(+params['id'])) 
    postRequest.subscribe(response => 
     this.product.setValue({ 
     title: response.json().title, 
     description: response.json().description, 
     sizes_attributes: this.get_sizes(response.json().sizes_attributes), 
     }) 
    ); 

    this.returnUrl = this.route.snapshot.queryParams['successUrl'] || '/products' 
    this.product = this.fb.group({ 
     title: ['', [Validators.required, Validators.minLength(5)]], 
     description: ['', [Validators.required, Validators.minLength(5)]], 
     sizes_attributes: this.fb.array([ 

     ]) 
    }) 
    } 

Erhalten Größen Methode für Add Größenwert aus der Datenbank vorhandenen

get_sizes(sizes){ 
    const control = <FormArray>this.product.controls['sizes_attributes'] 
    sizes.forEach((size, i) => { 

     control.push(this.fb.group({ 
     id: size.id, 
     size_number: [size.size_number, [Validators.required,Validators.maxLength(5)]], 
     _destroy: '', 
     }) 
    ) 
     }) 
     return control 
    }