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

I have a dropdown that fills whit array. and i have local_data that load in dialog box when I click in on row in my table for editing

Now I want my drop-down list value to be displayed on a value that has already been selected and saved by the user this is my drop down list

<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>

I want my dropdown list set to local_data.id But I cant do this and always only the first item in the list is displayed to me Now how do I do that?

CodePudding user response：

The problem is that you set the value of the option to be the string "mypersonName.id". But instead you want to assign the actual id to the value. You can achieve this by using data binding (square brackets)

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

You can read more about it here.

CodePudding user response：

use this

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