Angular Material 下拉列表：具有绑定的对象值，初始（默认）值未显示

Question

有一个简单的下拉菜单，填充了用户对象：

        <mat-form-field>
          <mat-label>User</mat-label>
          <mat-select [(ngModel)]="userSelected" id="user">
            <mat-option *ngFor="let user of users" [value]="user">
              {{user.id}} {{user.name}}
          </mat-select>
        </mat-form-field>

对象 user 和 userSelected 是简单的用户对象，包含 ID 和名称字段：

  users: User[] = [
    {
      id: 'k2l13',
      name: 'SomeName'
    },
    {
      id: 'l3213',
      name: 'AnotherName'
    },
    {
      id: '23p13',
      name: 'OneMore'
    },
  ];
  
  userSelected: User = {
    id: 'k2l13',
    name: 'SomeName'
  },

上述解决方案在显示下拉菜单时不会将 userSelected 显示为默认用户。但是，该对象正确地绑定值更改。

如何将对象绑定到下拉列表并在初始显示？

Answer 1

这是预期的行为，因为 userSellected 和 users[0] 不共享相同的引用（正如 {} == {} 语句的结果为假）。
考虑应用以下更改，以便 userSellected 引用数组中的现有项目：

userSelected: User = this.users[0];

Angular Material 下拉列表：具有绑定的对象值，初始（默认）值未显示

Angular Material Dropdown: object value with binding, initial (default) value not showing

angular

angular-material

angular-material2

angular2-template