Angular2 [selected] 不适用于 [ngValue]

Question

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

这是我的代码：

使用[value] 和[selected]，将球队的俱乐部设置为[selected] 选项，但我无法将对象传递给[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 在事件绑定中。链接 => change event

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

此外： [value] 支持字符串值，而 [ngValue] 支持任何类型，并且要将对象用作值，请使用 [ngValue] 而不是 [value]。

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

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

Answer 2

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