Использование ngValue с автозаполнением Angular Material?
Я передаю объект как свое значение, и мне нужно использовать [ngValue] вместо [value].
Мой HTML выглядит так:
<mat-input-container fxFlex = "18" fxFlexOffset = "1">
<input
matInput
placeholder = "Example"
[matAutocomplete] = "autocomplete"
[ngModel] = "user?.UserName"
(ngModelChange) = "filter($event)"
[disabled] = "disabled"/>
<mat-autocomplete #autocomplete = "matAutocomplete"
(optionSelected) = "optionSelected($event)" >
<mat-option *ngFor = "let selectedUser of availableUsers" [ngValue] = "selectedUser">
<span>{{ selectedUser?.UserName }}</span>
</mat-option>
</mat-autocomplete>
</mat-input-container>
В качестве демонстрации у меня также есть stackblitz с моей ошибкой, представленной здесь: https://stackblitz.com/edit/angular-5wk4rl?file=app%2Fautocomplete-simple-example.html
Я получаю сообщение об ошибке:
Ошибки разбора шаблона:
Can't bind to 'ngValue' since it isn't a known property of 'mat-option'.
1. If 'mat-option' is an Angular component and it has 'ngValue' input, then verify that
it is part of this module.
2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the
'@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the
'@NgModule.schemas' of this component.
Как упоминалось в другом ответе в стеке, Angular — невозможно привязать к «ngValue», так как это неизвестное свойство «mat-option»
Пользователи предполагают, что добавление его в файл модулей решит проблему, но когда я попробовал это (как видно из моего material-module.ts в моем stackblitz), ошибка сохраняется.
Какие-либо предложения? Буду признателен за любую помощь!
Почему вы хотите иметь объекты в качестве значений параметров автозаполнения (вместо строк)?
@ConnorsFan, потому что иногда в моделях данных используются объекты, а не строки.
@ConnorsFan Я обновил html в своем примере, чтобы уточнить
Ответы 1
<mat-option *ngFor = "let option of options" [value] = "option">
Ознакомьтесь с документацией здесь: https://material.angular.io/components/autocomplete/обзор
Чтобы использовать объект:
<mat-autocomplete #auto = "matAutocomplete" [displayWith] = "displayFn">
<mat-option
*ngFor = "let selectedUser of availableUsers" [value] = "selectedUser">
{{selectedUser.name}}
</mat-option>
</mat-autocomplete>
в файле xxx.ts:
displayFn(user?): string | undefined {
return user ? user.name : undefined;
}
Да - это работает. Мне интересно, есть ли способ заставить [ngValue] работать вместо [value].
Нет. Как вы думаете, зачем вам это нужно?
зачем вам нужно использовать [ngValue]?
если я использую [value] = "selectedUser", то, хотя раскрывающийся список заполнен правильно, мой выбор отображается как «[object Object]» вместо имени пользователя пользователя. Хотя теоретически я мог бы использовать [value] = "selectedUser?.UserName" - при сохранении я хотел бы сохранить весь объект целиком - и передать объект, а не только имя пользователя, потому что есть другие раскрывающиеся списки с другим атрибутом на «Пользователь», который можно изменить
Понимаю. Вы можете попробовать это, просто отобразите в нем имя, вы все равно передаете объект [value]: <mat-option *ngFor = "let option of group.options" [value] = "option"> {{option.name }} </mat-опция>
Используйте <mat-autocomplete [displayWith] = "displayFn" ...>. См. material.angular.io/components/autocomplete/….
@katwhocodes да - извините, я забыл упомянуть, я обновил html в своем посте, чтобы уточнить, что у меня есть прямо сейчас
@Jedo Я вижу, тогда ты можешь использовать displayWith. я обновил ответ
@katwhocodes спасибо за предложение! работает :)
Вы не можете использовать привязку свойства ngValue с опцией mat, потому что предполагается, что она будет использоваться только с элементом
option.mat-optionберет[value]крепления