从角度打字稿数组中选择默认选项值

Question

I have an array of data in my typescript file

app.component.ts

data = [{id:1, name: "book1"}, {id:2, name:"book2"}, {id:3, name: "book3"}]

My html page:

app.component.html

 <select id="category" class="form-control">
    <option *ngFor="let d of data; let i = index;" [selected]="i == 0" [value]="d.id">{{d.name}}</option>
 </select>

I want to select book1 for my default value. But It select nothing. How can I solve this problem ? I'm using angular 7.1.3 .

Answer 1

using ng-selected in the option tag should work

https://www.w3schools.com/angular/ng_ng-selected.asp

Answer 2

You need to bind the value to the id of the selected item.

HTML

<mat-form-field>
  <mat-select [(value)]="selected">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field> 

TS

  selected = 1;

For furthemor information just check the official guide of angular forms

Answer 3

I am giving the solution for Template driven approach with simple array iterated with *ngFor for your DropDown

Working Stackbliz Demo

HTML:

  <div>
      <label>Dropdown with default option loaded Template Driven: </label
      ><br /><br />
      <select
        id="country"
        name="country"
        [ngModel]="selectedValue"
        #subscription="ngModel"
      >
         
        <option
          *ngFor="let country of countryArray;let i = index"
          [value]="country"
          >{{i}}{{country}}</option
        ></select
      >
    </div>

TypeScript:

export class AppComponent  implements OnInit{
   countryArray = ["USA", "India", "Philippines","UK"];
 
selectedValue ;
 onSubmit(form: NgForm){
    console.log("submit button clicked"); 
  }
  ngOnInit() {
    this.selectedValue = this.countryArray[1]; 
  }
 
}