我正在使用Visual Studio 2015中的angular4 Web API。这里的页面中有一些文本框，单击按钮后，我从数据库中选择数据并将其显示在文本框中。
我想在页面加载时显示空框，但是在显示数据之前，文本框是不可见的（也就是说，除非我从服务器获取数据，否则“项目详细信息”将为空，因此不会呈现DOM文本框，并且仅在获取数据时出现）我是新用户，请帮忙
这是我的HTML代码
<form #newForm="ngForm" (ngSubmit)="OnSubmit(newForm.value);newForm.reset()">
<div class="row ">
<div class="col-md-12 col-sm-6 col-xs-12">
<div class="form-group">
<label>Item Code</label>
<ng-container *ngFor="let item of itemdetails;">
<input type="text" class="form-control" id="itemcode" name="itemcode" [value]="item.ItemCode" required />
</ng-container>
</div>
.........etc rows...........
<input type="button" value="Add Item" class="btn btn-success"
(click)="addItems(newForm.value);newForm.reset()" /> </div>
这是我的TS代码
addItems(value: any) {
this.items = new IComboDetails(value.ItemID, value.ItemCode, value.ItemDescription, value.PackingtypeID, value.PackingtypeName, value.quantity);
this.stockitems.push(this.items);
}
我认为是因为您正在* ngFor中显示输入字段。除非您从服务器获取详细信息，否则itemdetails数组将保持为空，并且不会呈现输入字段。
您可以声明一个布尔值标志以检查是否从服务器获取数据或使用itemdetails.length
<div class="form-group">
<!--Until server returns its data show empty text field may you can keep it disabled -->
<ng-container *ngIf="!itemdetails || itemdetails.length == 0">
<label>Item Code</label>
<input type="text" class="form-control" name="temporaryField" />
</ng-container>
<!--If server returns data display data in text field -->
<ng-container *ngFor="let item of itemdetails;" >
<label>Item Code</label>
<input type="text" class="form-control" id="itemcode"
name="itemcode" [value]="item.ItemCode" required />
</ng-container>
</div>
另一种方式 ：
<div class="form-group">
<!--Until server returns its data show empty text field may you can keep it disabled -->
<ng-container *ngIf="!itemdetails || itemdetails.length == 0">
<label>Item Code</label>
<input type="text" class="form-control" name="temporaryField" />
</ng-container>
<!--If server returns data display data in text field -->
<div *ngIf="itemdetails && itemdetails.length > 0">
<ng-container *ngFor="let item of itemdetails;" >
<label>Item Code</label>
<input type="text" class="form-control" id="itemcode"
name="itemcode" [value]="item.ItemCode" required />
</ng-container>
</div>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句