为什么默认值不显示在Mat Select下拉菜单上？

Question

我对Angular相当陌生，但是除非我从Mat Select（用于我的GraphQL突变）中删除ngModel，否则它将不会呈现默认值。我的目标是使下拉列表预先填充用户的当前位置。

<mat-list-item>
      <mat-form-field>
        <mat-label>Location</mat-label>
        <mat-select [value]="user.position" matNativeControl required [(ngModel)]="newLocation">
          <mat-option value="Top">Top</mat-option>
          <mat-option value="Front">Front</mat-option>
          <mat-option value="Middle">Middle</mat-option>
          <mat-option value="Back">Back</mat-option>
          <mat-option value="Right">Right</mat-option>
          <mat-option value="Left">Left</mat-option>
        </mat-select>
      </mat-form-field>
</mat-list-item>

这里是TS文件：

  updateUser(userId) {
    this.apollo
      .mutate({
        mutation: EDIT_USER,
        variables: {
          input: {
            userPosition: this.newLocation,
          }
        }
      })
      .subscribe(
        ({ data }) => {
          if (data['editUser'].complete) {
            this.getAssets();
            const user = this.assetDetails.users.find((s) => s.id === userId);
            user.userPosition = this.newLocation;
          }
        },
        (error) => {}
      );
  }

我已经验证过user.position给我正确的值，因为一旦[[ngModel）] =“ newLocation”被删除，它就会呈现，但是就像我之前说的那样，我的突变是必需的。我似乎无法找出解决方法。感谢任何输入。

Answer 1

只需删除matNativeControl和[(ngModel)]绑定。此后，预定义值将起作用（如果user.position值等于任何选项值。这是区分大小写的。）

Answer 2

您应该同时使用ngModel或Value，但不能同时使用。

Answer 3

我在其他答案的帮助下找到了答案：