0
我是Angular 2的新手,正在開發一個具有表單和表格的小型應用程序。 表單用於輸入過濾條件。一旦用戶點擊提交按鈕,數據應該被加載到表格中。第一次加載時,網格應填入數據庫表中的所有數據。添加表單後,角度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">×</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>
輸出如下。它不顯示錶格中的數據(第一次加載時)。可能是什麼原因??
我會努力實現這個方式。謝謝。 –
@ChathurangaRanasinghe當然,讓我知道它是怎麼回事! :) – Alex