添加表单后，角度2表格加载为空

Question

我是Angular 2的新手，正在开发一个具有表单和表格的小型应用程序。 表单用于输入过滤条件。一旦用户点击提交按钮，数据应该被加载到表格中。第一次加载时，网格应填入数据库表中的所有数据。

我在我的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>

数据加载与下面没有问题。

然而，当我添加表单控件使用以下代码（在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>

输出如下。它不显示表格中的数据（第一次加载时）。可能是什么原因？？

Answer 1

这里需要使用一个FormArray为您的数据，所以你的形式构建应该是这样的：

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

我喜欢从后端获取数据后，填写表格，也就是我假设你是从让你的数据，因此在回调（订阅）调用setWarehouses，它看起来像这样，我们遍历您已经收到仓库，并为每个对象创建具有两个属性的表单组。

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