如何将值绑定到 angular 中的下拉列表以编辑某些数据

Question

我有一个用数组填充的下拉列表。当我单击 table 中的行进行编辑

时，我有 local_data 加载到对话框中

现在我希望我的下拉列表值显示在用户已经选择并保存的值上这是我的下拉列表

<div class="col-lg-6 col-md-8 d-flex">
  <select formControlName="personName">
    <option *ngFor="let mypersonName of dataArray" value="mypersonName.id">{{mypersonName.personName}}</option>
  </select>
</div>

我希望我的下拉列表设置为 local_data.id 但我做不到，总是只显示列表中的第一项现在我该怎么做？

Answer 1

问题是您将选项的值设置为字符串“mypersonName.id”。但是相反，您想将实际的 id 分配给该值。您可以通过使用数据绑定（方括号）

来实现

<option *ngFor="let mypersonName of dataArray" [value]="mypersonName.id">
  {{mypersonName.personName}}
</option>

您可以阅读更多相关信息 here。

Answer 2

使用这个

<option *ngFor="let mypersonName of dataArray" 
[selected]="mypersonName.id === 'specificId'" 
[value]="mypersonName.id">
{{mypersonName.personName}}
</option>

如何将值绑定到 angular 中的下拉列表以编辑某些数据

How to bind value to dropdown in angular for edit some data

angular-directive

angular-material

angular