如何在 Angular + 2 中设置选定的默认值

Question

在“dropOptions”中创建了一个值为“true”的对象。 在 HTML 中，我调用 [selected] = "option.selected" 来包含选择。

目的是将 selected = "selected" 元素包含在值为 'true' 的对象中。

感谢帮助！

 dropOptions = [ { name: "ID parceiro", value: 'partner', selected: true }, { name: "ID", value: 'id' }, { name: "Nome do Item", value: 'name' } ];

 <select (change)="selectOption($event)" [(ngModel)]="selectedOption" class="form-control gray-txt"> <option [value]="option.value" [selected]="option.selected" *ngFor="let option of dropOptions">{{option.name}}</option> </select>

Answer 1

尝试：

      <select (change)="selectOption($event)" [(ngModel)]="selectedOption"
        class="form-control gray-txt">
        <option [value]="option.value" [selected]="option.value === selectedOption" *ngFor="let option of dropOptions">{{option.name}}</option>
      </select>

Answer 2

如果你想像占位符那样设置dropOptions array以外的默认值，那么就这样做。

组件.html

 <select (change)="selectOption($event)" [(ngModel)]="selectedOption"
                class="form-control gray-txt">
                <option value="Select">Select</option>
                <option [value]="option.value" [selected]="option.selected" *ngFor="let option of dropOptions">{{option.name}}</option>
              </select>

组件.ts

  selectedOption = 'Select';

如果你想从dropOptions array设置默认值，那么试试这个component.ts

 selectedOption = 'idB2W';

这将设置选择的第二个项目，因为我们已将选项值设置为[value]="option.value" 。