Почему значение по умолчанию не отображается в выпадающем списке Mat Select? - PullRequest
Новая
       21

Почему значение по умолчанию не отображается в выпадающем списке Mat Select?

0 голосов
/ 14 января 2020

Я довольно новичок в Angular, но если я не удалю ngModel из моего выбора Mat (который используется для моей мутации 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" удаляется, но, как я уже говорил ранее, необходима для моей мутации. Я не могу найти обходной путь. Цени любой вклад.

Ответы [ 3 ]

1 голос
/ 14 января 2020

Вы должны использовать либо ngModel, либо Value, но не оба вместе.

1 голос
/ 14 января 2020

Просто удалите привязку matNativeControl и [(ngModel)]. После этого предопределенное значение будет работать (если значение user.position равно значению любого параметра. Это чувствительно к регистру).

0 голосов
/ 14 января 2020

Я выяснил с помощью других ответов:

Мне в основном пришлось установить значение в 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 и значение нельзя использовать одновременно, так как ngModel имеет приоритет.

...