Question

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

Answer 1

您可以使用[(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 Example

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

1 个答案: