각도 2의 복제 div 선택 2가 제대로 작동하지 않음

Question

Angular의 2 개의 Reactive 양식 "Form Array의 속성"을 사용하여 '+'버튼 클릭시 div의 요소 사본을 만들고 해당 div 양식을 제거합니다. '- '. 버튼 복제가 잘 작동하지만 복제 할 때 select 2를 파괴하고 select 2는 원래 형태로 복제하지 않습니다.

다음

import { Component, OnChanges, AfterViewInit } from '@angular/core'; 
import { FormArray, FormBuilder, FormGroup} from '@angular/forms'; 

import { ProductPrice, OrderProduct } from './product-price-model'; 
declare var $:any; 
@Component({ 
    selector: 'app-order-product', 
    templateUrl: './order-product.component.html', 
    styleUrls: ['./order-product.component.css'] 
}) 
export class OrderProductComponent implements OnChanges,AfterViewInit { 

myNav = 'Home'; 
secondNav = 'Product'; 
thirdNav = 'Order Products'; 
isThird = 'true'; 

OrderProductForm: FormGroup; 
OrderProd : OrderProduct; 

ngOnInit() { 

} 

ngAfterViewInit() { 
    $('.select-search').select2(); 
} 

constructor(private fb: FormBuilder){ 
    this.createForm(); 
} 

createForm() { 
    this.OrderProductForm = this.fb.group({ 
     // Vendor: '', 
     // OrderDateTime: '', 
     // DeliveryDate: '', 
     productPriceDiv: this.fb.array([]), 
    }); 
    this.productPriceDiv.push(this.fb.group(new ProductPrice())); 
} 

ngOnChanges(){ 
    this.setProductPrice(this.OrderProd.ProPrice); 
    alert("asd"); 
} 

get productPriceDiv(): FormArray { 
    return this.OrderProductForm.get('productPriceDiv') as FormArray; 
}; 

setProductPrice(ProdPrice: ProductPrice[]) { 
    const PpFGs = ProdPrice.map(product_price => this.fb.group(product_price)); 
    const PpFormArray = this.fb.array(PpFGs); 
    this.OrderProductForm.setControl('productPriceDiv', PpFormArray); 
} 

addProductPriceDiv() { 
    this.productPriceDiv.push(this.fb.group(new ProductPrice())); 
} 

removeProductPriceDiv(index) { 
    this.productPriceDiv.controls.splice(index, 1); 
} 
} 

는 HTML입니다 : 여기

는 구성 요소 코드입니다 이런 식으로

<form [formGroup]="OrderProductForm" (ngSubmit)="onSubmit()"> 
        <div class="panel-body"> 
        <div class="row"> 
         <div class="col-md-12"> 
         <fieldset class="text-semibold"> 
          <legend><i class="icon-reading position-left"></i> General</legend> 
          <div class="row"> 
          <div class="col-md-4"> 
           <div class="form-group"> 
           <label>Select Vendor </label> 
           <select class="select-search"> 
            <optgroup label="Mountain Time Zone"> 
            <option value="AZ">Arizona</option> 
            <option value="CO">Colorado</option> 
            <option value="ID">Idaho</option> 
            <option value="WY">Wyoming</option> 
            </optgroup> 
            <optgroup label="Central Time Zone"> 
            <option value="AL">Alabama</option> 
            <option value="IA">Iowa</option> 
            <option value="KS">Kansas</option> 
            <option value="KY">Kentucky</option> 
            </optgroup> 
            <optgroup label="Eastern Time Zone"> 
            <option value="CT">Connecticut</option> 
            <option value="FL">Florida</option> 
            <option value="MA">Massachusetts</option> 
            <option value="WV">West Virginia</option> 
            </optgroup> 
           </select> 
           </div> 

          </div> 

          <div class="col-md-4"> 
           <div class="form-group"> 
           <label>Order DateTime</label> 
           <div class="input-group"> 
            <span class="input-group-addon"><i class="icon-calendar3"></i></span> 
            <input type="text" class="form-control" id="anytime-both" value="June 4th 08:47"> 
           </div> 
           </div> 
          </div> 
          <div class="col-md-4"> 
           <div class="form-group"> 
           <label>Delivery Date</label> 
           <div class="input-group"> 
            <span class="input-group-addon"><i class="icon-calendar22"></i></span> 
            <input type="text" class="form-control daterange-single" value="03/18/2013"> 
           </div> 
           </div> 
          </div> 


          </div> 



         </fieldset> 
         </div> 

         <div formArrayName="productPriceDiv" class="col-md-12"> 
          <fieldset> 
          <legend class="text-semibold"><i class="icon-truck position-left"></i> Product details</legend> 
          <div *ngFor="let product_price of productPriceDiv.controls; let i=index" [formGroupName]="i" class="row"> 
           <div class="col-md-4"> 
           <div class="form-group"> 
            <label>Product</label> 
            <select class="select-search" formControlName="Product"> 
            <optgroup label="Mountain Time Zone"> 
             <option value="AZ">Arizona</option> 
             <option value="CO">Colorado</option> 
             <option value="ID">Idaho</option> 
             <option value="WY">Wyoming</option> 
            </optgroup> 
            <optgroup label="Central Time Zone"> 
             <option value="AL">Alabama</option> 
             <option value="IA">Iowa</option> 
             <option value="KS">Kansas</option> 
             <option value="KY">Kentucky</option> 
            </optgroup> 
            <optgroup label="Eastern Time Zone"> 
             <option value="CT">Connecticut</option> 
             <option value="FL">Florida</option> 
             <option value="MA">Massachusetts</option> 
             <option value="WV">West Virginia</option> 
            </optgroup> 
            </select> 
           </div> 
           </div> 

           <div class="col-md-2"> 
           <div class="form-group"> 
            <label>Unit Cost</label> 
            <input type="text" class="form-control" formControlName="UnitCost" readonly> 
           </div> 
           </div> 

           <div class="col-md-2"> 
           <div class="form-group"> 
            <label>Quantity</label> 
            <input type="text" class="form-control" formControlName="Quantity" > 
           </div> 
           </div> 

           <div class="col-md-2"> 
           <div class="form-group"> 
            <label>Cost:</label> 
            <input type="text" class="form-control" formControlName="Cost" > 
           </div> 
           </div> 

           <div class="col-md-2"> 
           <label></label> 
           <div class="form-group"> 
            <button type="button" (click)="addProductPriceDiv()" class="btn border-success text-success btn-flat btn-rounded btn-icon btn-xs"><i class="icon-add" ></i></button> 
            <button type="button" (click)="removeProductPriceDiv(i)" class="btn border-success text-success btn-flat btn-rounded btn-icon btn-xs"><i class="icon-dash" ></i></button> 
           </div> 
           </div> 

          </div> 
          </fieldset> 
         </div> 
        </div> 

        <div class="text-right"> 
         <button type="submit" class="btn btn-primary">Submit form <i class="icon-arrow-right14 position-right"></i></button> 
        </div> 
        </div> 
       </form> 

Answer 1

시도 방법, 문제 해결 얻을 희망

addProductPrice() { 
     return this._fb.group({ 
      Product: [''], 
      UnitCost: [''], 
      Quantity: [''], 
      Cost: [''] 
     }); 
    }; 

    createForm() { 
     this.OrderProductForm = this._fb.group({ 
       ProductPrice: this._fb.array([ 
        this.addProductPrice() 
       ]) 
     }); 
    } 

    addProductPriceDiv() { 
     const control = <FormArray>this.OrderProductForm.controls['productPriceDiv']; 
     control.push(this.addProductPrice()); 
    } 

    removeProductPriceDiv(index) { 
     const control = <FormArray>this.OrderProductForm.controls['productPriceDiv']; 
     control.removeAt(index); 
    };