时间戳

首页 > 解决方案 > ng-for 中的文本框仅在有数据时显示

angular - ng-for 中的文本框仅在有数据时显示

问题描述

我正在研究角度。我在页面中有一些文本框，单击按钮时，我从数据库中选择数据并将其显示在文本框中。

在我显示数据之前，文本框不可见，我是角度新手，请帮助

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);   
}

我的文本框代码：

   <div class="col-md-12 col-sm-12 col-xs-12">

       <div *ngFor="let match of stockitems">
           <input type="text" class="form-control" placeholder="Item Code" required="" [(ngModel)]="match.ItemCode" value="{{match.ItemCode}}" />
       </div>
   </div>

按钮代码：

<input type="button" value="Add Item" class="btn btn-success" (click)="addItems(newStockoutForm.value);newStockoutForm.reset()" />

我不需要ngFor循环，我只返回一个数据，但我不知道如何加载它。

标签： angular

解决方案

<ng-container *ngIf="!itemdetails || itemdetails.length == 0">
<label>Item Code</label> 
<input type="text" class="form-control" name="temporaryField"  /> 
</ng-container>

<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>

<br/><br/>
<button (click)="addItem()">Add Item</button>
</div>
  `
})

推荐阅读