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内部所做的一样

尝试这样的事情：

打字稿结尾：

  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

Answer 2

一种非ngModel的操作方式如下，因为ngModel在v7中已弃用：https://next.angular.io/api/forms/FormControlName#use-with-ngmodel

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

此处演示：https://stackblitz.com/edit/angular-wvnjn5

在角度选择中加载默认选项

2 个答案: