установить раскрывающееся значение в компоненте редактирования

Question

У меня есть форма редактирования с выпадающим списком mat-select. Я хочу установить выбранный элемент в раскрывающемся списке при переходе к форме редактирования. Для этого я вызываю службу для получения значения Current.

мой HTML:

  <mat-form-field appearance="outline">
                  <mat-select formControlName="organisationUnit" placeholder="Organisation Unit" [(value)]="selected">
                    <mat-option *ngFor="let unit of orgUnits" [value]="unit.id" >
                      {{unit.name}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>

Мой тс:

  ngOnInit() {

    this.setupFirstFormGroup();
    this.setupSecondFormGroup();
    this.firstFormGroup.get('status').setValue(true);
    this._route.params.subscribe(params => {
      this.tenantAdminService.getUser(params.id).subscribe(res => {
        this.firstFormGroup.get('first_name').setValue(res['first_name']);
        this.firstFormGroup.get('last_name').setValue(res['last_name']);
        this.tenantAdminService.getOrganizationUnit(res['organizationUnit']).subscribe(res => {
          console.log("ORGUNIT", res);
          this.selected = res['id'];

          this.firstFormGroup.get('organisationUnit').setValue(res['id']);

        });

      });
    });

  }

В настоящее время не устанавливается значение в раскрывающемся списке и оно пустое. Выводится значение, но выбранный параметр не отображается как выбранный

Answer 1

Чтобы предварительно выбрать значения, вам необходимо привязать вашу модель к списку select.

<mat-form-field appearance="outline">
      <mat-select [(ngModel)]="your_model_name" formControlName="organisationUnit" placeholder="Organisation Unit" [(value)]="selected">
           <mat-option *ngFor="let unit of orgUnits" [value]="unit.id" >
                {{unit.name}}
           </mat-option>
       </mat-select>
</mat-form-field>

Когда вы связываете модель и предварительно устанавливаете значение, требуемое для модели в вашем Компоненте, предварительно выбранное значение будет отображаться в списке select.Кроме того, обратите внимание, что если ваши раскрывающиеся значения не являются строками, вам нужно использовать [ngValue]="..." вместо [value]="...", поскольку value поддерживает только строки.

Так что теперь, если мы используем модель myUnit:

...
<mat-select [(ngModel)]="myUnit" ...
...

И в нашем Компоненте :

this.myUnit = { ... , id: 1}; // pre-selecting a demo unit object

Из нашего выпадающего списка будет предварительно выбран блок с unit.id = 1.

Если вы получитепредупреждение:

Похоже, вы используете ngModel в том же поле формы, что и formControlName.Поддержка использования свойства ввода ngModel и события ngModelChange с директивами реактивной формы устарела в Angular v6 и будет удалена в Angular v7

, затем обратите внимание: если вы ищете документы Angular 6, используйте это .Что касается исключения из официальных документов , есть три возможных варианта, если мы хотим заменить это:
1. использовать реактивные формы

// html
<mat-form [formGroup]="form"> ... 
    <mat-select formControlName="organisationUnit"> ...
    ....
</form>
// Component: 
this.form.get('organisationUnit').setValue('your preset value');

использовать управляемые шаблоном формы

отключить это предупреждение (не рекомендуется для использования)

импорт: [ReactiveFormsModule.withConfig ({warnOnNgModelWithFormControl: 'never'});]

Подобная проблема с устареванием уже задавалась ранее, и пожалуйста, обратитесь к оригинальному stackoverflow post для комментариев и ответов.Я только что дал принятый ответ, если сообщение удалено и ссылка устарела.