为什么默认值不呈现在 Mat Select 下拉列表中？

Question

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

<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

我在其他答案的帮助下弄明白了：

我基本上必须将 ngModel (newLocation) 中的值设置为一个保持初始值的变量，而不是将新值设置为 'newLocation'。这样，它将呈现初始/默认值。然后我将该变量作为参数传递给我的突变。

这是更新后的代码片段：

<mat-list-item>
      <mat-form-field>
        <mat-label>Location</mat-label>
        <mat-select [value]="user.position" matNativeControl required [(ngModel)]="user.userPosition">
          <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>

然后我这样调用我的函数：

updateUser(user.id, user.userPosition)

和 TS：

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

一个非常简单的修复。 ngModel 和 value 不能同时使用，因为 ngModel 优先。

为什么默认值不呈现在 Mat Select 下拉列表中？

Why does the default value not render on Mat Select dropdown?

select

default-value

drop-down-menu

angular