Привязка элемента select к объекту в угловом

Я новичок в 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 был объектом, а не только идентификатором. Я попытался изменить значение параметра вот так:

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

но это, похоже, не работает. Кажется, он помещает объект в мое selectedValue - но не тот объект, который я ожидаю. Ты можешь!--11-->смотрите это в моем примере Plunker.

Я также попытался привязаться к событию изменения, чтобы я мог установить объект сам на основе выбранного идентификатора; однако, похоже, что событие изменения срабатывает до обновления связанного ngModel-это означает, что у меня нет доступа к вновь выбранному значению точка.

есть ли чистый способ привязать элемент select к объекту с угловым 2?

9 ответов


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

StackBlitz пример

Примечание: Вы можете использовать [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);

_comareFn((a, b) {
   if(this.x ...) {
     ...
}

Это может помочь:

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

вы можете сделать это без необходимости использовать [(ngModel)] в своем <select> tag

объявите переменную в файле ts

toStr = JSON.stringify;

и в вас шаблон этого

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

и затем использовать

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

чтобы проанализировать строку обратно в допустимый объект JavaScript


вы можете выбрать Id с помощью функции

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

это сработало для меня:

шаблон 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>

на компонент.ТС:

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

An вам нужно добавить в 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>

на компонент.ТС:

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

An вам нужно добавить в component.ts функции:

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

для меня его работа такова, вы можете утешить event.target.value.

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

на всякий случай, если кто-то хочет сделать то же самое, используя реактивные формы:

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

Проверьте рабочий пример здесь


кроме того, если ничего другого из данных решений не работает, проверьте, импортировали ли вы "FormsModule" внутри "AppModule", это был ключ для меня.


вы можете получить выбранное значение также с помощью 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>