Angular 6 显示依赖于下拉列表的选定选项答案

【问题标题】：Angular 6 show dropdown dependent selected optionAngular 6 显示依赖于下拉列表的选定选项
【发布时间】：2019-02-09 14:33:45
【问题描述】：

我有两个下拉选择选项，但我正在努力根据第一个更新第二个选择的选项。

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

在第一个下拉菜单中选择一个项目后，我想在第二个下拉菜单中默认选择模块的课程，并在选择另一个下拉菜单后刷新。

【问题讨论】：

标签： html angular typescript angular-material angular6

【解决方案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 演示

【讨论】：

与@bgraham 相同...在您的演示中工作的内容不在我的应用程序中imgur.com/r9eY0YF
好的，我没有设置 Id 值，但整个课程谢谢@bgraham

【解决方案2】：

我认为问题是你在点击事件中调用 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()方法

【讨论】：