Angular 6 показывает выпадающий список в зависимости от выбранной опции

Question

У меня есть две выпадающие опции выбора, но я изо всех сил пытаюсь обновить выбранную вторую опцию на основе первой.

HTML

<form novalidate [formGroup]="editModuleForm" (ngSubmit)="onSubmitForm()">

<div align="center">
  <mat-form-field>
    <mat-select placeholder="Select Module" formControlName="moduleControl" required>
      <mat-option *ngFor="let module of modules" [value]="module" (click)="popData()">
        {{ module.title }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

<div *ngIf="editModuleForm.get('moduleControl').value" align="center">
    <div align="center">
        <mat-form-field>
            <mat-select placeholder="Select Course" formControlName="courseControl">
                <mat-option *ngFor="let course of courses" [value]="course.courseId" >
                    {{ course.name }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>

Компонент

constructor(private putService: PutService, private getService: GetService,
          private router: Router, private formBuilder: FormBuilder) {}

ngOnInit() {
this.getService.findAllModule().subscribe(modules => {
  this.modules = modules;
});

this.getService.findAllCourses().subscribe(courses => {
  this.courses = courses;
});

this.editModuleForm = this.formBuilder.group({
  moduleControl: this.formBuilder.control(null),
  courseControl: this.formBuilder.control(null)
});}

popData() {
this.editModuleForm.get('moduleControl').valueChanges.subscribe(
  value => {
    this.editModuleForm.controls['courseControl'].setValue(value.course);
    console.log(value);
  }
);}

После выбора элемента в первом раскрывающемся списке я хотел бы выбрать курс модуля по умолчанию, выбрать во втором раскрывающемся списке и обновить после выбора другого.

Answer 1

Вам необходимо подписаться на изменения в ngOnInit (), не нужно вызывать событие click

вот пример

ngOnInit() {

    this.editModuleForm = this.formBuilder.group({
      moduleControl: '',
      courseControl: ''
    });

     this.popData();
  }

  popData() {
    this.editModuleForm.controls['moduleControl'].valueChanges.subscribe(
      value => {
        this.editModuleForm.controls['courseControl'].setValue(value.id);
      }
    );
  }

Stackblitz демо

Answer 2

Я думаю, проблема в том, что вы вызываете this.editModuleForm.get ('moduleControl'). ValueChanges в событии click, вы на самом деле хотите вызвать его в ngOnInit. Это начинает слушать изменения значения, значение уже изменилось!

Может быть, попробовать это:

constructor(private putService: PutService, private getService: GetService,
          private router: Router, private formBuilder: FormBuilder) {}

ngOnInit() {
this.getService.findAllModule().subscribe(modules => {
  this.modules = modules;
});

this.getService.findAllCourses().subscribe(courses => {
  this.courses = courses;
});

this.editModuleForm = this.formBuilder.group({
  moduleControl: this.formBuilder.control(null),
  courseControl: this.formBuilder.control(null)
});

this.editModuleForm.get('moduleControl').valueChanges.subscribe(
  value => {
    this.editModuleForm.controls['courseControl'].setValue(value.course);
    console.log(value);
  }

}

Вы можете избавиться от события click и метода pop ()