时间戳

首页 > 解决方案 > 如何在角度 6 的编辑页面上以反应形式创建动态下拉字段

angular - 如何在角度 6 的编辑页面上以反应形式创建动态下拉字段

问题描述

我创建了一个带有 API 值的下拉字段。但我得到所有数据并将其显示在编辑页面中。但下拉字段显示所有下拉值，而不是先前存储的下拉值。这是 Edit.component.html 页面中下拉字段的代码。

  <div class="form-group">
  <label for="typeofWorkId" class="control-label"> Type of Work </label>
  <select id="typeofWorkId" appSelectValidator="select" name="typeofWorkId" class="form-control">
    <option value="Select">Select Type of work</option>
    <option *ngFor="let typeName of typeofworks" [value]="typeName.typeofWorkId"> {{typeName.name}} </option>
  </select>
</div>

这是从 API 获取下拉值的代码（edit.component.ts）。 

 typeofworks: TypeOfWork[];
ngOnInit() {
    this._vendorServices.getTypeOfWork().subscribe((workName) => { this.typeofworks = workName });
}

标签： angularforms

解决方案

您可以使用[(ngModel)]在编辑表单中绑定选定的值

HTML 代码：

<div class="form-group">
  <label for="typeofWorkId" class="control-label"> Type of Work </label>
  <select id="typeofWorkId" formControlName="typeofWorkId" appSelectValidator="select" name="typeofWorkId" class="form-control" [(ngModel)]="alreadySelectedValue.typeofWorkId">
    <option value="Select">Select Type of work</option>
    <option *ngFor="let typeName of list" [value]="typeName.typeofWorkId"> {{typeName.name}} </option>
  </select>
</div>

在 TS 文件中：

alreadySelectedValue = { "typeofWorkId": 11, "name": "Water Proofing" }; // Your already selected value

StackBlitz 示例

推荐阅读