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（）上进行订阅更改，而无需调用点击事件

这是一个例子

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

我认为问题是您在click事件中调用this.editModuleForm.get（'moduleControl'）。valueChanges，您实际上想在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（）方法

Angular 6显示下拉菜单取决于所选选项

2 个答案: