在我在 Angular4 中显示数据之前，文本框是不可见的

Question

我在 Visual Studio 2015 年在 angular4 web API 上工作。这里我在页面中有一些文本框，单击按钮我从数据库中选择数据并将其显示在文本框中。

我想在页面加载时显示空框，但是这里文本框在我显示数据之前是不可见的（这意味着，除非我从服务器 "item details" 获取数据将是空的，因此在 DOM 文本框未呈现，仅在我获取数据时出现）我是新手 angular 请帮助

这是我的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);   
}

Answer 1

我认为这是因为您在 *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>

在我在 Angular4 中显示数据之前，文本框是不可见的

The textbox is not visible until I show the data in Angular4

angular

dom

angular-forms