html - Angular 6 显示依赖于下拉列表的选定选项
问题描述
我有两个下拉选择选项,但我正在努力根据第一个更新第二个选择的选项。
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);
}
);}
在第一个下拉列表中选择一个项目后,我想在第二个下拉列表中默认选择模块的课程,并在选择另一个下拉菜单后刷新。
解决方案
您需要在 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);
}
);
}
推荐阅读
- c++ - Where is the code in the Microsoft Calculator where two numbers are added together?
- c - 从 C 中的文件中读取不同的值并根据条件打印
- c - 交流计数器的实现
- python - Python pandas str.extract 从多列
- python - 从 Python3 中的字符串中获取某些文本
- apache - 清漆、SSL 和 HTTP 标头 - 使用 SSL 重新加载后没有 X-Cache?
- javascript - 拆分对象并将其分组
- java - 有一些我找不到的隐藏错误
- node.js - Jest 不运行 - 无限期挂起
- github - Github Repo 受保护的分支配置不起作用