Angular ng内的文本框，仅在有数据时显示

我在做角形的。我在页面中有一些文本框，单击一个按钮，我从数据库中选择数据并在文本框中显示

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

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()" />

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

---

我不需要

ngFor

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

如您所述，您有以下要求：

1） 只有一个文本框

2） 应该从服务器端填充模型值

3） 应该在DOM中显示空文本框，直到收到模型值

您可以执行以下操作来解决：

1） 对于这种情况，数据结构数组是错误的，因为您只有一个值

 item={ItemCode:''}; // whatever fields in this object, empty on page-load
  addItems(value: any) {     
   this.item.ItemCode=value;   // map the corresponding value to the model
  }

2） 无需循环，只需映射模型即可

<div>
    <input type="text" class="form-control" placeholder="Item Code [(ngModel)]="item.ItemCode" value="{{item.ItemCode}}" />
  </div>    

项目代码
项目代码



添加项
`
})
在组件类中有
stockitems
，而在
itemdetails
上循环。可能还有其他一些事情可能是错误的。你能提供一个最小的可复制的stackblitz样本吗？我相信@JM的意思是，除非他从服务器获取数据，“itemDetails”将为空，因此在DOM文本框中不会呈现，并且只有当他获取数据时才会出现。我猜，他想展示空盒子。@JM，现在，由于数组中可能有不同数量的项，因此文本框的数量也不同，所以您无法判断要渲染多少个，除非实际需要received@yanky_cranky是的，我想显示空文本框。将只有一个文本框get RenderId我不需要ng for循环，但我不知道如何在没有that@JM您可以在
ngOnInit
const item=new-IComboDetails（“，”“，”“，”“，”“，”“，”）中传递单个空白对象；this.stockitems=[item]@JM这能回答你的问题吗？
<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>
  `
})