在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中放置了一个对象——但不是我所期待的对象。你可以在普伦克的例子中可以看到。

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

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

655181 次浏览
小开
最佳答案 
<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
<option *ngFor="let c of countries" [ngValue]="c">\{\{c.name}}</option>
</select>

StackBlitz example

注意:你可以用[ngValue]="c"代替[ngValue]="c.id"，其中c是完整的国家对象。

[value]="..."只支持字符串值
[ngValue]="..."支持任何类型

更新

如果value是一个对象，则预选实例需要与其中一个值相同。

参见最近添加的自定义比较https://github.com/angular/angular/issues/13268 4.0.0-beta.7

<select [compareWith]="compareFn" ...

如果你想在compareFn中访问this，请注意。

compareFn = this._compareFn.bind(this);


// or
// compareFn = (a, b) => this._compareFn(a, b);


_compareFn(a, b) {
// Handle compare logic (eg check if unique ids are the same)
return a.id === b.id;
}
小开

这可能会有所帮助:

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

您可以使用函数选择Id

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

你也可以这样做，而不需要在你的<select>标记中使用[(ngModel)]

在ts文件中声明一个变量

toStr = JSON.stringify;

在模板中这样做

 <option *ngFor="let v of values;" [value]="toStr(v)">
\{\{v}}
</option>

然后使用

let value=JSON.parse(event.target.value)

将字符串解析回有效的JavaScript对象

小开

您还可以通过click()通过函数传递所选值来获得所选值

<md-select placeholder="Select Categorie"
name="Select Categorie" >
<md-option *ngFor="let list of categ" [value]="list.value" (click)="sub_cat(list.category_id)" >
\{\{ list.category }}
</md-option>
</md-select>
小开

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

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

此外，如果从给定的解决方案没有其他工作，检查你是否导入了“FormsModule”在“AppModule”，这是我的一个关键。

小开

这招对我很管用:

< em >模板HTML: < / em >

我将(ngModelChange)="selectChange($event)"添加到我的select中。

<div>
<label for="myListOptions">My List Options</label>
<select (ngModelChange)="selectChange($event)" [(ngModel)]=model.myListOptions.id >
<option *ngFor="let oneOption of listOptions" [ngValue]="oneOption.id">\{\{oneOption.name}}</option>
</select>
</div>

在component.ts < em >: < / em >

  listOptions = [
{ id: 0, name: "Perfect" },
{ id: 1, name: "Low" },
{ id: 2, name: "Minor" },
{ id: 3, name: "High" },
];

你需要在component.ts中添加这个函数:

  selectChange( $event) {
//In my case $event come with a id value
this.model.myListOptions = this.listOptions[$event];
}
< p >注意: I try with [select]="oneOption.id==model.myListOptions.id" and not work.

=============另一种方式可以是:=========

< em >模板HTML: < / em >

我将[compareWith]="compareByOptionId添加到我的select中。

<div>
<label for="myListOptions">My List Options</label>
<select [(ngModel)]=model.myListOptions [compareWith]="compareByOptionId">
<option *ngFor="let oneOption of listOptions" [ngValue]="oneOption">\{\{oneOption.name}}</option>
</select>
</div>

在component.ts < em >: < / em >

  listOptions = [
{ id: 0, name: "Perfect" },
{ id: 1, name: "Low" },
{ id: 2, name: "Minor" },
{ id: 3, name: "High" },
];

你需要在component.ts中添加这个函数:

 /* Return true or false if it is the selected */
compareByOptionId(idFist, idSecond) {
return idFist && idSecond && idFist.id == idSecond.id;
}
小开

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

<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>

检查工作示例在这里

小开

为所选项目创建另一个getter

<form [formGroup]="countryForm">
<select formControlName="country">
<option *ngFor="let c of countries" [value]="c.id">\{\{c.name}}</option>
</select>


<p>Selected Country: \{\{selectedCountry?.name}}</p>
</form>

在ts中:

get selectedCountry(){
let countryId = this.countryForm.controls.country.value;
let selected = this.countries.find(c=> c.id == countryId);
return selected;
}
小开

用这种方式也可以。

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
<option *ngFor="let c of countries" value="\{\{c.id}}">\{\{c.name}}</option>
</select>
小开

在app.component.html:

<select type="number" [(ngModel)]="selectedLevel">
<option *ngFor="let level of levels" [ngValue]="level">\{\{level.name}}</option>
</select>

和app.component.ts:

import { Component } from '@angular/core';


@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
levelNum:number;
levels:Array<Object> = [
{num: 0, name: "AA"},
{num: 1, name: "BB"}
];


toNumber(){
this.levelNum = +this.levelNum;
console.log(this.levelNum);
}


selectedLevel = this.levels[0];


selectedLevelCustomCompare = {num: 1, name: "BB"}


compareFn(a, b) {
console.log(a, b, a && b && a.num == b.num);
return a && b && a.num == b.num;
}
}
小开

关键是在select中通过[(ngModel)]使用双向绑定，并在每个option中使用[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>

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

小开

这段代码非常简单:

<select class="form-control" id="marasemaat" [(ngModel)]="fullNamePresentor"
[formControl]="stateControl" (change)="onSelect($event.target.value)">
<option *ngFor="let char of programInfo1;let i = index;"
onclick="currentSlide(9,false)"
value=\{\{char.id}}>\{\{char.title + " "}}  ----> \{\{char.name + " "+ char.family }} ---- > \{\{(char.time.split('T', 2)[1]).split(':',2)}}</option>
</select>
小开
Angular 2+用户: 由于某种原因，[value]在元素上不起作用。

.使用[ngModel]代替 
<select [ngModel]="selectedCountry">
<option *ngFor="let country of countries" [value]="country">\{\{country.name}}</option>
</select>
小开

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

提交答案