angular - Angular 9 - mat-select 的问题，它没有选择选项列表中的当前值

Question

我有一个问题，我创建了一个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>

我的组件.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)]

标签： angularangular-material