Угловой 2 Выберите сложный объект с начальным значением


В Angular (2.2) я пытаюсь инициализировать select, используя сложный объект. Но поскольку объект не является фактической ссылкой на что-то в списке select (даже если он идентичен), он не распознает его как выбранный. Вот с чем я работаю:

<select [(ngModel)]="model.object">
  <option *ngFor="let obj of objects" [ngValue]="obj">{{ obj.name }}</option>
</select>

Это работает, как и предполагалось, когда вы изменяете выбор. Но при начальной загрузке, даже если model.object идентичен объекту в списке, он ничего не выбирает.

Два обходных пути для этого должны (1) пройти через список и swap model.object должны быть прямой ссылкой, но это одна строка в таблице многих элементов, подобных этому, так что это будет очень дорого. Или (2) bind [(ngModel)]="model.object.id" и [ngValue]="object.id" (простой тип), но я действительно хочу, чтобы весь объект был представлен в модели, поэтому мне все равно придется выполнить привязку к обработчику событий, запустить массив элементов, пока я не найду этот идентификатор, и установить его самостоятельно.

Я надеялся, что есть способ сделать track by своего рода, поэтому начальный выбор отслеживается по id.

В Угловой 1, это может быть достигнуто с помощью:

<select ng-model="model.object"
    ng-options="obj.id as obj.name for obj in objects">
Но я, кажется, не могу найти эквивалент.
1 2

1 ответ:

Вы можете попробовать ниже,

@Component({
  selector: 'my-app',
  template: `Angular
  <select (change)="chnageProduct($event.currentTarget.value)" >
  <option *ngFor="let obj of objects" [value]="obj"
   [selected]="model.name === obj.name"
   >{{ obj.name }}</option>
</select>
  `
})
export class AppComponent {
  result: any = {};

  constructor(){
  }

  model =  {name : "1"}


  objects = [{name : "1"},{name: "2"}]

  chnageProduct(val){
     this.model = val;
  }
}

Вот это плунжер !!

Надеюсь, это поможет!!