Как отобразить раскрывающиеся значения, основанные на других выбранных раскрывающихся значениях, используя машинописный текст в Angular 4 - PullRequest
Новая
       6

Как отобразить раскрывающиеся значения, основанные на других выбранных раскрывающихся значениях, используя машинописный текст в Angular 4

0 голосов
/ 19 марта 2019

Я хочу изменить значение раскрывающегося списка на основе выбранного другого выбранного раскрывающегося списка.это 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());
}

Когда я вызываю это событие, идентификатор категории передается, но значение не отображается.Пожалуйста, скажите мне, что я делаю здесь не так.

1 Ответ

0 голосов
/ 19 марта 2019

Угловой способ выполнения вашего требования будет немного отличаться от того, как вы это сделали.

в вашем файле 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: Рабочая демонстрация

...