I'm trying to set the default value of a select tag containing objects in a form, using [selected] and [ngValue]. But for some reason they seem incompaptible.

我正在尝试使用[选定]和[ngValue]来设置表单中包含对象的选择标记的默认值。但出于某种原因，它们似乎无法相提并论。

Example code:

示例代码：

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

This code ends up just showing blank as the default value. If I remove the [ngValue] it works fine, except that then it's the store.name value that gets selected, instead of the store object.

这段代码最终只显示空白作为缺省值。如果删除[ngValue]，它就可以正常工作，只是选择的是store.name值，而不是store对象。

Any suggestions?

有什么建议吗？

You can use compareWith with [ngValue]

可以将CompareWith与[ngValue]一起使用

eg:

例如：

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

See: https://github.com/angular/angular/pull/13349

请参阅：https://github.com/angular/angular/pull/13349

Example Compare select options: http://blog.ninja-squad.com/2017/03/24/what-is-new-angular-4/

示例比较选择选项：http://blog.ninja-squad.com/2017/03/24/what-is-new-angular-4/

Note: this support is added in Angular4

注意：此支持是在Angular4中添加的

[ngValue]="..." is supposed to be used with [(ngModel)]. [selected] doesn't work with [ngValue].

[ngValue]=“...”应该与[(NgModel)]连用。[选定]不适用于[ngValue]。

Update your select tag as below, ngModel will hold selected value

如下所示更新您的选择标记，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>

Im posting my asnwer because maybe someone is getting the same behavior.

我发布我的告密者是因为可能有人也有同样的行为。

Im receiving a value from API and I need to assign to the form control then you can not assign it directly. You need to use the same availableStores instance array and find the value inside.
Thats the way to get [ngValue] works perfectly.

我正在从API接收一个值，我需要分配给表单控件，那么您不能直接分配它。您需要使用相同的availableStores实例数组并在其中找到值。这是让[ngValue]完美工作的方法。

control.setValue(this.availableStores.find(
  store => store.name === this.valueFromAPI.name
));

<select      
  class="form-control"
  formControlName="homeStore"      
  >
  <option
    *ngFor="let store of availableStores"
    [ngValue]="store">
    {{store.name}}
  </option>
</select>

Reference https://angular.io/api/forms/SelectControlValueAccessor check the first example.

Reference https://angular.io/api/forms/SelectControlValueAccessor检查第一个示例。

Add a

添加

[ngModel]="yourDefaultObject"

to your select and same for the first option

设置为您选择的选项，并且与第一个选项相同

In Angular, using Reactive Forms, with a select that has [ngValue] set up in the options, if you wanted to programmatically set the currently-selected option using Typescript from the associated Component, you can do it in this manner:

在角度上，使用反应形式，在选项中设置了[ngValue]的选择，如果要使用关联组件中的类型脚本以编程方式设置当前选定的选项，则可以按以下方式完成：

this.myReactiveForm.controls["mySelectControlName"].setValue( desiredValue );