angular - 在带 Angular 选择中加载默认选项

Question

我试图在我的选择中放置一个来自服务的默认选项。

我的选择。

<select (change)="changeValue()" [(ngModel)]="selectedValue">
<option *ngFor="let item of items" [ngValue]="item">{{ item.article }} - {{ item.value }}</option>
</select>

我传递给 ngFor 的数组.

  items: Array<any> = 
  [{ article: 'item1', value: 10 },{ article: 'item2', value: 20 }]

当我在我的应用程序中加载这个组件时，我从数据库收到一个包含这些选项之一的对象。

所以我想做的是，我收到的选项，将其设置为默认值。

我试过 [selected]但它不起作用。我该怎么做？

Answer 1

基本上你缺少这些东西:

ngValue应该是 item.value

您已经分配了值，因此只需更改 selectedValue 变量即可，就像我在 ngOnInit 中所做的那样

尝试这样的事情:

typescript 结束:

  items: Array<any> =
    [{ article: 'item1', value: 10 }, { article: 'item2', value: 20, defaultSelected: true }];
  selectedValue: string = '';
  ngOnInit() {      
    this.selectedValue = this.items.filter(a => a.defaultSelected)[0].value;
  }

HTML 结束:

<select (change)="changeValue()" [(ngModel)]="selectedValue">
<option *ngFor="let item of items" [ngValue]="item.value">{{ item.article }} - {{ item.value }}</option>
</select>

请查看此演示:https://stackblitz.com/edit/angular-v2a81r