Использовать [ngValue] и [selected] в теге select

Question

Я пытаюсь установить значение по умолчанию для тега select, содержащего объекты в форме, используя [selected] и [ngValue]. Но по какой-то причине они кажутся несовместимыми.

Пример кода:

<select id="selectedStore" *ngIf="showStore" 
    class="form-control" 
    formControlName="homeStore" 
    tabindex="{{getTabIndex('homeStore')}}"> 

    <option *ngFor="let store of availableStores" 
     [ngValue]="store" 
     [selected]="store.storeId == personalInfo.homeStore?.storeId"> 
     {{store.name}} 
    </option> 

</select> 

Этот код заканчивается просто показывает пустой в качестве значения по умолчанию. Если я удалю [ngValue], он будет работать отлично, за исключением того, что вместо него будет выбрано значение store.name, а не объект store.

Любые предложения?

Answer 1

[ngValue]="..." предполагается использовать с [(ngModel)]. [selected] не работает с [ngValue].

Answer 2

Обновите выберите тег, как показано ниже, ngModel будет держать выбранное значение

<select [(ngModel)]="selectedItem.Page.ID" class="form-control" (change)="OnPageSelected($event.target.value)"> 
    <option *ngFor="let page of PageCollection.Items;" value={{page.ID}}> 
     {{page.Name}} 
    </option> 
</select> 

Answer 3

Вы можете использовать compareWith с [ngValue]

например:

<select id="selectedStore" *ngIf="showStore" 
    class="form-control" 
    formControlName="homeStore" 
    tabindex="{{getTabIndex('homeStore')}}" [compareWith]="compareByID"> 
     <option *ngFor="let store of availableStores" 
      [ngValue]="store"> 
      {{store.name}} 
     </option> 
</select> 

compareByID(itemOne, itemTwo) { 
    return itemOne && itemTwo && itemOne.ID == itemTwo.ID; 
} 

См: https://github.com/angular/angular/pull/13349

Пример сравнения выберите опции: http://blog.ninja-squad.com/2017/03/24/what-is-new-angular-4/

Примечание: эта поддержка добавлена ​​в Angular4