Свойство привязки к объекту не работает в Angular 2

Question

У меня очень странное поведение с привязкой свойства Angular 2.

Во-первых, это класс Store:

export class Store {
    id: number;
    name: string;
    address: string;
}

Это код компонента:

export class MyBuggyComponent implements OnInit {

  stores: Store[];
  selectedStore: any;
  error: any;

  constructor(private myDataService: MyDataService) { }

  ngOnInit() {
    this.myDataService.getStores().subscribe(
      stores => this.stores = stores,
      error => { this.error = error; console.log(this.error); });
  }

  selectionChanged(value: any){
    console.log("DEBUG: " + value);
  }
}

И вот шаблон, который сводит меня с ума!

<form>
  <div class="form-group">
    <label for="store">Select store:</label>
    <select class="form-control custom-select" id="store" name="store" required 
      [(ngModel)]="selectedStore" (change)="selectionChanged($event.target.value)">
      <option *ngFor="let s of stores" [value]="s">{{s.name}}</option>
    </select>
    <small class="form-text text-muted" *ngIf="selectedStore">Address: {{selectedStore.address}}</small>
  </div>
</form>

Здесь обязательна [value]="s" из option из <select> тег просто не работает! Это устанавливает selectedStore к некоторому пустому объекту (?), он отображает пустой Address: текст в <small> тег, и это журналы: DEBUG: [object Object] в консоли (в selectionChanged()). Но {{s.name}} Интерполяция работает как положено (отображает имена внутри поля выбора).

Теперь посмотрите на это: если я сделаю следующую модификацию шаблона, он будет работать как положено:

  <option *ngFor="let s of stores" [value]="s.address">{{s.name}}</option>
</select>
<small class="form-text text-muted" *ngIf="selectedStore">Address: {{selectedStore}}</small>

Теперь привязка работает, адрес зарегистрирован в консоли, а также отображается в <small> пометить правильно. Так что связывание [value]="s" не работает (на самом деле дает какое-то странное значение 'object'), но привязка [value]="s.address" работает как положено. Я следовал за документами, и нет никаких упоминаний о таком ограничении. Это ошибка? Или я что-то упустил?

Answer 1

[value] поддерживает только строковые значения в качестве связанного значения. использование [ngValue] вместо этого он может связывать объекты.

Answer 2

У меня та же проблема, вы можете попробовать мое решение:

<select class="form-control custom-select" id="store" name="store" required 
  [(ngModel)]="selectedStore" (change)="selectionChanged($event.target.value)">
  <option *ngFor="let s of stores; let i = index" value="{{i}}">{{s.name}}</option>
</select>

// .ts
selectionChanged(value: any){
   // this.selectedStore = position in stores
   console.log(this.stores[this.selectedStore]);
}