为什么默认值不呈现在 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

我在其他答案的帮助下想通了：

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

这里是更新代码的sn-p：

<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 优先。

Answer 2

您应该使用 ngModel 或 Value，而不是同时使用。

Answer 3

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