在Angular中绑定选择元素到对象

我想把一个select元素绑定到一个对象列表上——这很简单:

@Component({
   selector: 'myApp',
   template: 
      `<h1>My Application</h1>
       <select [(ngModel)]="selectedValue">
          <option *ngFor="#c of countries" value="c.id">{{c.name}}</option>
       </select>`
    })
export class AppComponent{
   countries = [
      {id: 1, name: "United States"},
      {id: 2, name: "Australia"}
      {id: 3, name: "Canada"},
      {id: 4, name: "Brazil"},
      {id: 5, name: "England"}
   ];
   selectedValue = null;
}

在本例中，selectedValue似乎是一个数字——所选项目的id。

然而，我实际上想绑定到国家对象本身，以便selectedValue是对象，而不仅仅是id。我试着像这样改变选项的值:

<option *ngFor="#c of countries" value="c">{{c.name}}</option>

但这似乎并不奏效。它似乎在我的selectedValue中放置了一个对象——但不是我所期望的对象。你可以在我的Plunker例子中看到这一点。

我还尝试绑定到更改事件，以便我可以根据所选的id自己设置对象;然而，似乎在绑定的ngModel更新之前，change事件就触发了——这意味着我在那一点上没有访问新选择的值。

在Angular 2中，是否有一种简洁的方法将选择元素绑定到对象?

当前回答

在Angular 11上测试。我需要一个额外的对象'typeSelected'。注意，我没有像其他答案一样使用[(ngValue)]:

<mat-select formControlName="type" [(value)]="typeSelected" 
            [compareWith]="typeComparation">
  <mat-option *ngFor="let myType of allSurveysTypes" [value]="myType">
    {{myType.title}}
  </mat-option>
</mat-select>

//Declaration.
typeSelected: SurveyType;
...

//Assigning variable 'type' of object 'survey' to 'typeSelected'.
this.typeSelected = survey?.type;
...

    
//Function to compare SurveyType objects.
typeComparation = ( option, value ) =>  {
  if (option && value) {
    return option.id === value.id;
  }
}

2021-02-24 11:22:57

其他回答

关键是在select中通过[(ngModel)]使用双向绑定，并在每个选项中使用[ngValue]。

你甚至可以有一个默认的null选项，它适用于Angular 12。

<select name="typeFather" [(ngModel)]="selectedType">
  <option [ngValue]="null">Select a type</option>
  <option *ngFor="let type of types" [ngValue]="type">{{type.title}}</option>
</select>

这种方法总是有效的，但是如果您有一个动态列表，请确保在加载模型之前加载它。

2019-11-26 12:38:41

您可以使用函数选择Id

<option *ngFor="#c of countries" (change)="onchange(c.id)">{{c.name}}</option>

2017-01-24 10:05:13

对我来说，它是这样工作的，你可以console event。target。value。

<select (change) = "ChangeValue($event)" (ngModel)="opt">   
    <option *ngFor=" let opt of titleArr" [value]="opt"></option>
</select>

2017-12-24 06:30:38

这可能会有所帮助:

<select [(ngModel)]="selectedValue">
  <option *ngFor="#c of countries" [value]="c.id">{{c.name}}</option>
</select>

2016-12-15 14:41:36

以防有人想用响应式表单做同样的事情:

<form [formGroup]="form">
  <select formControlName="country">
    <option *ngFor="let country of countries" [ngValue]="country">{{country.name}}</option>
  </select>
  <p>Selected Country: {{country?.name}}</p>
</form>

在这里查看工作示例

2018-04-05 20:56:03

在Angular中绑定选择元素到对象

推荐文章

最新文章

标签