如何在Angular 4中使用打字稿基于其他下拉选择值显示下拉值答案

【问题标题】：How to display the dropdown values based on other dropdown selected value using typescript in Angular 4如何在Angular 4中使用打字稿基于其他下拉选择值显示下拉值
【发布时间】：2019-03-19 16:06:45
【问题描述】：

我想根据选择的其他下拉列表更改下拉列表值。这是 HTML

 <select class="form-control" name="category_id" formControlName="category_id" (change)="changeProfession($event.target.value)">
                                    <!-- <option value="" d>Select Category (required)</option> -->
                                    <option *ngFor='let surveyCategory of surveyCategoryList' [ngValue]="surveyCategory._id">{{ surveyCategory.category }}</option>
                                    <app-field-error-display [displayError]="this.validationService.isFieldValid(updateProfileForm,'category_id')">
                                    </app-field-error-display>
                               </select>

这里我想根据所选类别获得价值

<div class="form-group label-floating select_lang">
                                <label class="control-label">Profession</label>
                                <select class="form-control" name="profession_id" formControlName="profession_id" >
                                     <!-- <option value="" >Select Category (required)</option> -->
                                    <option *ngFor='let profession of ProfessionList' [ngValue]="profession._id">{{ profession.profession }}</option>
                                    <app-field-error-display [displayError]="this.validationService.isFieldValid(updateProfileForm,'profession_id')">
                                    </app-field-error-display>
                               </select>

                            </div>

这是ts文件

changeProfession(categoryid){
    debugger;
    this.authService.getProfessionList(categoryid).subscribe(data => {
        debugger;
        if (data.success) {
            debugger;
            this.ProfessionList = data.profession;
            console.log(data);
            setTimeout(() => {
            //if (obj.survey_category_id)
                    //this.updateProfileForm.controls['profession_id'].setValue(obj.profession_id._id);
                 $('.select_lang').removeClass('is-empty');
            }, 10);
        }

    });
}

这是服务文件

// Get survey profession list
 getProfessionList = function (categoryid) {
     debugger;
    return this.http.get(this.api_url + 'profession/list/'+ categoryid, this.getAuthHeaderOption()).map(res => res.json());
}

当我调用此事件时，类别 ID 正在传递，但值未显示。请告诉我我在这里做错了什么。

【问题讨论】：

您是否在控制台中正确获取“数据”？
只有我获得类别 ID
赞这个4: 5ae385afa4723d1858b0c239
当我在调试它然后在调用.subscribe 之后它完成并且不会进入 thisif (data.success) { debugger; this.ProfessionList = data.profession; console.log(data);
如果我正在检查邮递员并这样做 http://IPADDRES:DOMIAN/profession/list/5a745ef7eba43102e6038881 那么它在下面的输出中给了我这个 {"status":200,"success":true,"message":"list","profession":[{"_id":"5c2f65ab1f798017909615af","profession":"ss"}]}

标签： angular api events

【解决方案1】：

Angular 实现您的要求的方式将与您的方式略有不同。

在您的 component.ts 文件中添加以下代码，您已在其中初始化表单：

 this.sampleForm.controls['category_id'].valueChanges.subscribe((value) => {
       this.authService.getProfessionList(value).subscribe(data => {
            this.ProfessionList = data.profession;
       }); 
 });

将sampleForm 替换为您的formGroup 名称。还要注意data.profession 的值应该是对象数组。

这里是 Stackblitz 示例工作链接：Working Demo

【讨论】：

所以我们不需要像我一样创建更改事件吗？
当 Angular 已经提供了一个更改控制器时，你为什么要编写自己的更改控制器
非常感谢它真的对我有用，即使我卡了很长时间，但现在我摆脱了这个问题。
哪一个角度提供变更控制器？
@嗨，你在吗