将选择元素绑定到Angular中的对象

Question

我是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。

但是，我实际上想要绑定到country对象本身，以便selectedValue是对象而不仅仅是id。我尝试改变选项的值，如下所示：

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

但这似乎不起作用。它似乎将一个对象放在我的selectedValue中 - 但不是我期待的对象。你可以see this in my Plunker example。

我也尝试绑定到change事件，以便我可以根据所选的id自己设置对象;但是，似乎更改事件在绑定的ngModel更新之前触发 - 这意味着我无法访问此时新选择的值。

是否有一种干净的方法将选择元素绑定到具有Angular 2的对象？

Answer 1

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

如果您想在this内访问compareFn，请注意。

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

Answer 2

这可能有所帮助：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您也可以执行此操作而无需在[(ngModel)]代码中使用<select>

在ts文件中声明一个变量

toStr = JSON.stringify;

并在你的模板中执行此操作

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

然后使用

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

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

Answer 4

它对我有用：

模板HTML：

我将(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上：

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

注意： 我尝试使用[select]="oneOption.id==model.myListOptions.id"而无法正常工作。

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

模板HTML：

我将[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上：

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

Answer 5

您可以使用功能选择ID

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

Answer 6

对我这样工作，你可以安慰words_to_eliminate = c("the", "of", "add", "is") words_to_eliminate2 <- paste0("\\<[a-z]*", words_to_eliminate, "[a-z]*\\>") sentences = c("Other people are here", "This person is being offensive", "I'm addicted") gsub(words_to_eliminate2, "", sentences, ignore.case=TRUE) 。

event.target.value

Answer 7

以防万一有人希望使用Reactive Forms做同样的事情：

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

检查工作示例here

Answer 8

此外，如果给定解决方案中的任何其他内容都不起作用，请检查您是否在“AppModule”中导入了“FormsModule”，这对我来说是一个关键。

Answer 9

您可以通过将所选值传递给函数

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

Answer 10

为所选项目创建另一个吸气剂

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

Answer 11

也使用这种方式。

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

Answer 12

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

Answer 13

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

这种方法总是可行的，但是 如果您有动态列表，请确保在模型之前加载

Answer 14

Attention Angular 2+用户： 由于某些原因，[值]对元素无效。改用[ngModel]。

<select [ngModel]="selectedCountry">
    <option *ngFor="let country of countries" [value]="country">{{country.name}}</option>
</select>

Answer 15

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

HTML

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

Answer 16

这段代码很简单：

<select class="form-control" id="marasemaat" style="margin-top: 10%;font-size: 13px;" [(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>