Angular2 [выбранный] не работает с [ngValue]

Question

У меня возникла проблема, когда я не могу установить для клуба команды значение [selected] с помощью [ngValue]. Однако, если я использую [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.

Pattern: ngModel в привязке свойства и ngModelChange в привязке события. Ссылка => событие изменения

Примечание: Если двустороннее связывание происходит на HTML уровнях элементов, таких как в поле ввода или в поле выбора, тогда мы будем используйте ngModel для целевого имени как [(ngModel)]

Более того: [value] поддерживает строковые значения, тогда как [ngValue] поддерживает любой тип, а для использования объектов в качестве значения используйте [ngValue ] вместо [значение].

Возможная ошибка: Эта директива ngModel определена в одном из модулей, называемых формами, и по умолчанию она не импортируется в приложение. Если вы хотите использовать ngModel или хотите создавать какие-либо формы, вам нужно явно импортировать FormsModule в app.module.ts

Узнайте больше о двухстороннем связывании данных и ngModel по этим ссылкам. Ссылка - 1 Ссылка - 2

Answer 2

Вместо (change) Вы должны использовать (ngModelChange). Этот ответ содержит очень хорошее объяснение обоим из них.