Угловой 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 ответ:
Вы можете попробовать ниже,
@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; } }
Вот это плунжер !!
Надеюсь, это поможет!!