[英]How to display the dropdown values based on other dropdown value using typescript in Angular 2 application
[英]How to display the dropdown values based on other dropdown selected value using typescript in Angular 4
我想根據所選的其他下拉菜單更改下拉菜單值。 這是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正在傳遞,但值未顯示。 請告訴我我在做什么錯。
實現需求的Angular方法將與您完成的方法稍有不同。
在您的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工作示例鏈接: 工作演示
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.