Angular2 [selected] 不适用于 [ngValue]

Question

我遇到了问题，我无法使用[ngValue]将团队的俱乐部设置为[selected]选项。 但是，如果我使用[value]和[selected] ，它会将球队的俱乐部设置为该选项，但我无法通过[value]传递 object

这是我的代码：

使用[value]和[selected] ，将球队的俱乐部设置为[selected]选项，但我无法将 object 传递给[value]

<select
    *ngIf="isEditing"
    name="club"
    #club="ngModel"
    [ngModel]="team?.club">
    Change club's logo
    <option
        *ngFor="let item of premierLeagueTeams"
        [value]="item"
        [selected]="item === team?.club">
        {{ item.club }}
    </option>
</select>

使用 [ngValue]，但当我开始编辑时，选项字段没有球队俱乐部。

<select
    *ngIf="isEditing"
    class="team-club-change"
    name="club"
    #club="ngModel"
    [ngModel]="team?.club.clubName"
    (change)="changeTeam(club.value)">
    Change club's logo
    <option
        *ngFor="let item of premierLeagueTeams"
        [ngValue]="item">
        {{ item.clubName }}
    </option>
</select>

接口

export interface Team {
    name: string,
    club: Club,
    id: number
}

export interface Club {
    clubName: string, 
    logoURL: string,
    venue: string,
    city: string
}

Answer 1

NgModel 指令作为一个桥梁，可以“双向绑定”到 HTML 元素。 使用“双向绑定”，我们可以显示数据属性并在用户进行更改时更新该属性，我们可以在组件和 HTML 元素中实现这一点。

模式：属性绑定中的ngModel和事件绑定中的ngModelChange 。 链接 => 更改事件

注意：如果双向绑定发生在 HTML 元素级别，例如输入框或 select 框，那么我们将使用ngModel作为目标名称[(ngModel)]

另外： [value]支持字符串值，而[ngValue]支持任意类型，如果要使用对象作为值，请使用 [ngValue] 而不是 [value]。

可能的错误：此 ngModel 指令在名为 Forms 的模块之一中定义，默认情况下不会导入到应用程序中。 如果你想使用ngModel或者你想构建任何类型的 forms 你需要在 app.module.ts 中显式导入FormsModule

在这些链接上了解有关双向数据绑定和 ngModel 的更多信息Link - 1 Link - 2

Answer 2

而不是(change)您必须使用(ngModelChange) 。 这个答案对它们都有很好的解释。