フォームを追加した後に角2テーブルが空になる

Question

私は角2を初めて使用しています。フォームとテーブルを持つ小さなアプリケーションを開発しています。 フォームを使用してフィルタ条件を入力します。ユーザがSubmitボタンをクリックすると、データがテーブルにロードされます。最初に読み込むときは、グリッドはDBテーブルのすべてのデータで埋められる必要があります。

私はhome.component.htmlファイルで次のコードを使用しています。

<div class='panel panel-primary'> 
 

 
    <div class='panel-body'> 
 

 
     <div class='table-responsive'> 
 
      <!--<div style="padding-bottom:10px"><button class="btn btn-primary" (click)="addUser()">Add</button></div>--> 
 
      <div class="alert alert-info" role="alert" *ngIf="indLoading"><img src="../../images/loading.gif" width="32" height="32" /> Loading...</div> 
 
      <div *ngIf='warehouses && warehouses.length==0' class="alert alert-info" role="alert">No record found!</div> 
 
      <table class='table table-striped' *ngIf='warehouses && warehouses.length'> 
 
       <thead> 
 
        <tr> 
 
         <th>Territory Code</th> 
 
         <th>Warehouse Code</th> 
 
         <!--<th>Gender</th>--> 
 
         <th></th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr *ngFor="let warehouse of warehouses"> 
 
         <td>{{warehouse.TerritoryCode}}</td> 
 
         <td>{{warehouse.WarehouseCode}}</td> 
 

 
         <!--<td> 
 
          <button title="Edit" class="btn btn-primary" (click)="editUser(user.Id)">Edit</button> 
 
          <button title="Delete" class="btn btn-danger" (click)="deleteUser(user.Id)">Delete</button> 
 
         </td>--> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
      <div> 
 
      </div> 
 
     </div> 
 
     <div *ngIf="msg" role="alert" class="alert alert-info alert-dismissible"> 
 
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
      <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> 
 
      <span class="sr-only">Error:</span> 
 
      {{msg}} 
 
     </div> 
 
    </div> 
 
</div>

データは以下のように問題なくロードされます。しかしながら

、Iは（home.component.htmlの上部にこのコードを貼り付け）のコードの下に使用してファイルをhome.component.htmlするフォームコントロールを追加するとき

<div class="container"> 
 
    <h1>Search</h1> 
 
    <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value, myForm.valid)"> 
 
     <div class="form-group"> 
 
      <label for="">Territory</label> 
 
      <input type="text" class="form-control" formControlName="Territory"> 
 
      <small [hidden]="myForm.controls.Territory.valid || (myForm.controls.Territory.pristine && !submitted)" class="text-danger"> 
 
       Territory is required (minimum 5 characters). 
 
      </small> 
 
      <!--<pre class="margin-20">{{ myForm.controls.Territory.errors | json }}</pre>--> 
 
     </div> 
 
       
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
    </form> 
 
</div>

出力は以下のようになります。テーブルのデータは表示されません（初めてロードするとき）。理由は何でしょうか？あなたは、フォームのビルドは、次のようになりますので、あなたのデータはこちらFormArrayを使用する必要が

Answer 1

：

this.myForm = this.fb.group({ 
    warehouses: this.fb.array([]) 
}) 

私はバックエンドからデータを取得した後、フォームを埋めるのが好き、それはあります私があなたのデータを取得していると仮定したので、受信した倉庫を反復するこのようなコールバック（登録）コールsetWarehousesで呼び出し、各オブジェクトに対して2つのプロパティを持つフォームグループを作成します。

setWarehouses(){ 
    let control = <FormArray>this.myForm.controls.warehouses; 
    this.warehouses.forEach(x => { 
    control.push(this.fb.group({territoryCode: x.TerritoryCode, warehouseCode: x.WarehouseCode})) 
    }) 
} 

次に、あなたのテンプレートは次のようになります。私はこの方法を実装しようとします

<form [formGroup]="myForm"> 
    <!-- the formarray --> 
    <table formArrayName="warehouses"> 
    <tr> 
     <th>Territory Code</th> 
     <th>Warehouse Code</th> 
    </tr> 
    <!-- Iterate the formGroups in the form array --> 
    <tr *ngFor="let warehouse of myForm.controls.warehouses.controls; let i=index"> 
    <!-- Each form group has a index --> 
    <ng-container formGroupName="{{i}}"> 
     <!-- The form controls --> 
     <td><input formControlName="territoryCode" /></td> 
     <td><input formControlName="warehouseCode" /></td> 
    </ng-container> 
    </tr> 
    </table> 
</form> 

DEMO