У меня проблема, я создал mat-select
, чтобы позволить пользователю переключать язык. В моем компоненте я инициализирую объект, который сохраняет текущее значение выбора, и проблема заключается в том, что каждый раз, когда вы открываете раскрывающийся список mat-select
, значение «preselected
» из списка всегда будет первым, а не тот, который был ранее выбран!
Это также вызывает проблему, когда я не могу нажать на первый, ничего не произойдет, если я это сделаю. Я подозреваю, что я сделал что-то не так в реализации mat-select и о том, как сохранить текущее значение, кто-нибудь может мне помочь?
HTML
<mat-form-field>
<mat-select (selectionChange)="rememberLang($event.value)" [(value)]="savedLang" [compareWith]="objectComparisonFunction">
<mat-select-trigger>
<mat-icon>language</mat-icon>
<span>{{savedLang.text}}</span>
</mat-select-trigger>
<mat-option *ngFor="let lang of languages" [value]="lang">{{lang.value}}</mat-option>
</mat-select>
</mat-form-field>
myComponent.ts
public languages = [
{ text: "Deutsch", value: "de" },
{ text: "Italiano", value: "it" },
{ text: "Français", value: "fr" },
{ text: "English", value: "en" },
];
public savedLang = {text: "", value: ""};
ngOnInit() {
this.remember.lastUsedLang.subscribe(l => {
if (l) {
this.setSavedLang(l);
} else {
this.savedLang = { text: "Deutsch", value: "de" };
}
});
}
В основном, когда компонент запускается, я проверяю, есть ли у пользователя язык в LocalStorage
и устанавливаю переменную this.savedLang
в в противном случае, если нет, я установил по умолчанию на немецкий язык.
Я подозреваю, что мой код HTML
неверен, кажется, что все работает нормально, нет ошибок консоли, единственная проблема в том, какой язык выбран Когда я открываю раскрывающийся список mat-select
, выделение «выделение» всегда будет в первом элементе списка, а не в текущем текущем значении.
РЕДАКТИРОВАТЬ: Я исправил это , проблема была в Angular9, вам нужно использовать [value]
вместо [(value)]