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);
      }
    );
  }

Z zxswい但是

Answer 2

我认为问题是你在click事件中调用this.editModuleForm.get（'moduleControl'）。valueChanges，你实际上想在ngOnInit中调用它。它开始听取价值变化的价值已经改变了！

也许试试这个：

 Stackblitz 

你可以摆脱click事件和pop（）方法