如何使用Angular 4中的typescript显示基于其他下拉选择值的下拉值

我想根据所选的其他下拉列表更改下拉列表值。 这是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>

这是服务文件

// 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正在传递，但值未显示。

---

请告诉我我做错了什么。

实现您需求的角度方式将与您所做的方式略有不同

在

component.ts

文件中，在已初始化表单的位置添加以下代码：

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

用您的

formGroup

名称替换

sampleForm

。还要注意，

data.profession

的值应该是对象数组

以下是示例工作Stackblitz链接：

---

您在控制台中获取的“数据”是否正确？只有我在调试时获取的类别IDL与此类似

4:5ae385afa4723d1858b0c239

，然后在调用

.subscribe

后，它才完成，而不是进入此

if（data.success）中{debugger；this.ProfessionList=data.profession；console.log（data）；

如果我正在检查邮递员并这样做

http://IPADDRES:DOMIAN/profession/list/5a745ef7eba43102e6038881

然后它给了我以下输出

{“status”：200，“success”：true，“message”：“list”，“profession”：[{“\u id”：“5c2f65ab1f798017909615af”，“职业”：“ss”}]

我们不需要像我一样创建更改事件吗？angular已经提供了很多更改控制器，但为什么要编写自己的更改控制器呢？它对我来说真的很有效，即使我很长时间都在结巴，但现在我摆脱了这个问题。哪一个angular提供了更改控制器？@您好

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

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