Почему выпадающие значения не приходят с помощью Angular?

Пытаясь привязать данные к раскрывающемуся списку, но ничего не связывая, раскрывающийся список отображает НИЧЕГО НЕ ВЫБРАНО .

<select #classProductTypeCombobox 
        name="classProductTypeCombobox" 
        class="form-control col-md-3" 
        [(ngModel)]="classification.codeType"
        [attr.data-live-search]="true" 
        jq-plugin="selectpicker" 
        required>
    <option *ngFor="let classType of classificationTypes" 
            [value]="classType">{{classType}}</option>
</select>

Угловой Код: 

getClassificationTypes(): void {
    //need to remove hard coding
    this._commonService.getLookupItems(1, 6).subscribe((result) => {
        this.classificationTypes= result.items;

    });
}

ngOnInit(): void {
    this.getClassificationTypes();
}

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

Метод getClassificationTypes вызывает API для получения данных из базы данных.

Я пишу это приложение, используя ASP.NET нулевая структура.

Я попробовал следующее решение. это привязка данных к выпадающему списку, но функция автоматического поиска выпадающего списка исчезла, он показывает простой выпадающий список. и в консоли он выдает следующее сообщение об ошибке.

getClassificationTypes(): any {
    return this._commonService.getLookupItems(2, 6).subscribe((result) => {
        console.log(result.items)
        return this.classificationTypes = result.items;
    });
}

classificationTypes: TaxonomyItemsLocDto[] = this.getClassificationTypes();


ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

В журнале консоли classificationTypes отображается как [classType, classType, classType, classType ]

Ответ от API: 

{"result":{"items":[{"taxonomyItemsId":4,"taxonomyMasterId":2,"taxonomyItemLocDesc":"Sales"},{"taxonomyItemsId":5,"taxonomyMasterId":2,"taxonomyItemLocDesc":"Administrative"},{"taxonomyItemsId":6,"taxonomyMasterId":2,"taxonomyItemLocDesc":"Financial"},{"taxonomyItemsId":7,"taxonomyMasterId":2,"taxonomyItemLocDesc":"Informative"}]},"targetUrl":null,"success":true,"error":null,"unAuthorizedRequest":false,"__abp":true}
6 5
typescript angular2-template

6 ответов:

Нужно использовать значения из типа класса локальной переменной внутри ngFor так как это объект. Пожалуйста, обратитесь к нижеприведенному ответу и замените свой вариант следующим: 

<option *ngFor="let classType of classificationTypes" [value]="classType.taxonomyItemsId">{{classType.taxonomyItemLocDesc}}</option>
3

Если classType является объектом, то вместо него нужно использовать [ngValue]. [value] только работает для строковых значений 

[ngValue]="classType"

classification.codeType должно быть присвоено значение, соответствующее одному из classType. Если classType является объектом, он должен быть точно таким же экземпляром (другого экземпляра с тем же содержанием недостаточно). Пользовательская функция сравнения позволяет иметь различные экземпляры.

3

Вы убедились, что получаете данные из базы данных?

Вы пробовали использовать ng-repeat вместо ng-for? Потому что тип проекта (ASP.NET MVC 5.x & Angularjs 1.x) то, что я использую, - это использование ng-repeat.

Вы можете перейти на этот веб-сайт и выбрать тип проекта, чтобы посмотреть, как они реализуют ng-repeat

2

Существует ошибка в возврате данных из метода getClassificationTypes().

Здесь "result" - это переменная в коде, содержащая JSON, имеющий ключ с тем же именем "result".

Таким образом, элементы получат такой же результат, как .результат.items , но вы вернули только результат.items , который возвращает undefined.

Поэтому ваш код должен быть следующим (результат.результат.предметы):

getClassificationTypes(): any {
    return this._commonService.getLookupItems(2, 6).subscribe((result) => {
        console.log(result.items)
        return this.classificationTypes = result.result.items;
    });
}
2

Вам нужно утешить результат. вы должны получать данные в типе объекта, как {}. вам нужно получить массив данных в виде []. допустим, вы получаете данные в виде {data: [{}, {}]} чего-то вроде этого. затем вы делаете следующее в своем коде 

getClassificationTypes(): void {
    //need to remove hard coding
    this._commonService.getLookupItems(1, 6).subscribe((result) => {
        this.classificationTypes= result.items['data'];

    });
}

Поскольку вы дали утешительное значение как {result:{items:[{, я предполагаю, что вам нужно проверить с моделью для результата. прежде чем вы получите эти данные модель должна иметь такую же структуру этих данных в противном случае вы можете написать код как этот.

result['items']

И Ваше объявление результата должно быть result = {};

1

А как насчет: 

<option *ngFor="let classType of classificationTypes" [value]="'' + classType.taxonomyItemsId">{{classType.taxonomyItemLocDesc}}</option>
0