Angular 9 - проблема с mat-select, он не выбирает текущее значение в списке опций - PullRequest
0 голосов
/ 29 апреля 2020

У меня проблема, я создал 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)]

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...