Question

我的打字稿文件中有一个数据数组

app.component.ts

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

我的html页面：

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>

我想选择book1作为默认值。但是它什么也没选择。我怎么解决这个问题？我正在使用angular 7.1.3。

Answer 1

在ng-selected标记中使用option应该有效

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

Answer 2

您需要将该值绑定到所选项目的ID。

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;

有关假肢的信息，请查看正式的角形指南

Answer 3

我正在为您的 DropDown 提供带有 Template driven approach 和 simple array 迭代的 *ngFor 解决方案

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>

打字稿：

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]; 
  }
 
}

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

3 个答案: