В зависимости от варианта использования инициализация некоторых выбранных параметров по умолчанию может не работать путем простой привязки к ngModel, потому что объекты в параметрах и в выбранном подмножестве из предыдущего состояния имеют разные идентификаторы. Благодаря поддержке compareWith их можно установить как выбранные.
Ознакомьтесь с официальной документацией по Angular здесь.
В демо-приложении Material2 есть пример функции с двумя реализациями. Это здесь.
В моем компоненте у меня есть коллекция объектов User [люди] для опций выбора мата. Компонент получает набор выбранных объектов User [пользователей] в качестве входных данных из предыдущего состояния. Достаточно справедливо, объекты в [люди] и объекты в [пользователи] имеют разные идентификаторы, и подмножество в множественном выборе по умолчанию не инициализируется с установленными флажками.
Итак, волшебный compareWith просто буквально сравнивает объекты по некоторым заданным значениям и возвращает истину или ложь, а флажки на подмножестве [люди] получают статус выбранных. В моем коде я решил использовать привязку [(ngModel]):
<mat-form-field>
<mat-select [compareWith]="compareFn" name="users" [(ngModel)]="users" multiple>
<mat-option *ngFor="let person of people" [value]="person">
{{ person.username }}
</mat-option>
</mat-select>
</mat-form-field>
И в файле .ts я использую функцию из документа Angular, чтобы вернуть истину, если два объекта User имеют одинаковый идентификатор:
compareFn(user1: User, user2: User) {
return user1 && user2 ? user1.id === user2.id : user1 === user2;
}
Если у вас есть аналогичный вариант использования, он может работать из коробки.
Что касается заметки о том, что находится под капотом, compareWith вызвало у меня любопытство. Я выяснил, что он основан на функции в Angular2 под названием looIdentical (посмотрите здесь), который, в свою очередь, является производным от идентичной библиотеки Dart.js от Google. Его можно найти здесь.
person
RedDree
schedule
06.04.2018
