在 select 标签中使用 \[ngValue\] 和 \[selected\]

Question

我正在尝试使用 [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 值，而不是商店对象。

有什么建议么？

原文由 TheFisherman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 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 中添加的

原文由 Touqeer Shafi 发布，翻译遵循 CC BY-SA 3.0 许可协议