Angular 6: невозможно получить выбранное значение в событии selectionChange

Question

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

Я пробовал ответить для выбранного значения, но значения не отображаются.

У меня есть форма, как показано ниже:

<form [formGroup]="productForm" (ngSubmit)="onSubmit()">
    <mat-form-field">
      <mat-label>Main Type</mat-label>
      <mat-select [(value)]="selectedType" (selectionChange)="onTypeChange($event.value)"
        formControlName="mainTypeId">
        <mat-option *ngFor="let list of mainList" [value]="list.id">{{list.name}}</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field">
      <mat-label>Sides Type</mat-label>
      <mat-select [(value)]="selectedSide" formControlName="sideTypeId">
        <mat-option *ngFor="let list of sidesList" [value]="list.id">{{list.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
</form>

EditProductComponent.ts

export class EditProductUploadImageComponent implements OnInit {
    public selectedType: any;
  public selectedSide: any;

  constructor(private fb: FormBuilder,
    private productService: ProductService) {
    this.formInitialization();
    this.getSelectedData()
  }

    getSelectedData() {
    this.productService.getProductDesignRef(this.data.editId).subscribe((response: any) => {
        this.refrences = response.data[0]
        console.log(this.refrences)
        this.productService.getMainListById(this.refrences.main_type_id).subscribe((response: any) => {
          this.selectedType = response.data[0].id
          this.getMainTypeList()
          if(response) {
            this.productService.getSidesListById(this.refrences.sides_type_id).subscribe((response: any) => {
              this.selectedSide = response.data[0].id
              this.onTypeChange(1)
            })
          }
        })
    })
  }

  getMainTypeList() {
    this.productService.getMainTypeList().subscribe((response: any) => {
      if (response) {
        this.mainList = response.data;
        console.log(this.mainList)
      }
    }
  }

  onTypeChange(value: number) {
    this.productService.getSidesTypeListById(value).subscribe((response: any) => {
      if (response) {
        this.mainTypeListById = response['data']['0']['sides-type'];
        this.sidesList = this.mainTypeListById
        console.log(this.sidesList)
      }
    }
  }
}

=> Используя идентификаторы ссылок, я передал выбранное значение в форме , Но не может получить правильный вывод.

Просьба просмотреть все журналы консоли в этой jsfiddle link

Для получения дополнительной информации просмотрите эти два изображения, касающиеся рабочего процесса.

1. Список записи: https://prnt.sc/rw2ucu; при нажатии на кнопку редактирования откроется окно редактирования, и я хочу, чтобы два перечисленных значения были на странице списка для обновления записей.
2. Диалоговое окно редактирования: https://prnt.sc/rw2xeh

Заранее спасибо ... !!!

Answer 1

Я только что заметил, что вы используете реактивные формы.

<!-- why are you using value and formControlName & why you passing $event.value in your method? -->
<mat-select 
   [(value)]="selectedType" 
   (selectionChange)="onTypeChange($event.value)"
   formControlName="mainTypeId"
>

<!-- when you are using reactive forms you can just access mainTypeId in your onTypeChange method -->
<mat-select 
   (selectionChange)="onTypeChange()"
   formControlName="mainTypeId"
>

// your method
onTypeChange() {
   // your access mainTypeId here directly like this
   const mainTypeId = this.yourFormName.get('mainTypeId').value;
}

Вы можете легко обработать ваш случай редактирования, используя [CompareWith], если вышеупомянутое не работает для вашего случая редактирования.

И ЕСЛИ ВЫ НЕ ИСПОЛЬЗУЕТЕ РЕАКТИВНУЮ ФОРМУ :

1. Прежде всего, я не вижу никакого использования значения в вашем методе onTypeChange.
2. Здесь (selectionChange) = "onTypeChange ($ event.value) "вам не нужно передавать $ event.value, потому что для значения, которое вы уже устанавливаете в selectedType
3. Вам просто нужно получить доступ к this.selectedType в вашем методе onTypeChange

Если неясно, пожалуйста, прокомментируйте, я вернусь к вам.

Answer 2

Вы не можете использовать [(значение)] и formControlName для одного компонента материала. Это не ведет себя.

И обновите this.selectedType = response.data [0] .name на this.selectedType = response.data [0] .id в вашей getSelectedData функции

Вы не используете выбранное значение в функции onTypeChange

onTypeChange(value: number) {
  this.productService.getSidesTypeListById(1).subscribe((response: any) => {
     if (response) {
       this.mainTypeListById = response['data']['0']['sides-type'];
       this.sidesList = this.mainTypeListById
       console.log(this.sidesList)
     }
   }
}

Вы должны использовать значение , чтобы увидеть влияние.