угловой 5 утешительный запрос http toPromise () возвращает неопределенный - PullRequest
Новая
       40

угловой 5 утешительный запрос http toPromise () возвращает неопределенный

0 голосов
/ 03 мая 2018

Я вызываю конечную точку API в angular 5, используя импорт Http, чтобы заполнить выпадающий список, но я получаю неопределенное значение, когда я регистрирую его в консоли, и выпадающий список не заполняется какими-либо данными ... он должен быть категориями элементов .

Пункт-category.ts 

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import {Router} from '@angular/router';
import { Globals } from '../shared/api';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/toPromise';
declare var $: any;

@Injectable()
export class ItemCategoryService{
    private categoryUrl = this.globals.CATEGORYS_URL;
    constructor(private http: Http, private globals: Globals,  private router:Router) { }

fetchCategories(){
    let v = this.page_header();
    return this.http.get(this.categoryURL, v)
        .toPromise()
        .then(response => response.json())
        .catch(this.handleError);
    };
}

itemCategory.component.ts 

fetchCategorys(){
    this.categorySrv.fetchCategories().then(response =>this.categorys = response.results  )
    .catch(error=> this.error = error )
    console.log(this.categorys);   // <== undefined
}

itemCategory.component.html 

<select class="form-control" [(ngModel)]="product.category"[formControl]="productForm.controls['productCategory']" require>
    <option *ngFor="let item of categorys" [value]="item.slug">{{item.name}}</option>
</select>

Это то, что у меня есть, но undefined - это то, что я получаю в консоли, а в выпадающем меню ничего нет из API, проверка также ничего не показывает ... что я мог ошибиться?

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

Нет смысла менять свое наблюдаемое на обещание

Сохраняйте сервис, возвращающий наблюдаемое: 

//service
fetchCategories(){
    let v = this.page_header();
    return this.http.get(this.categoryURL, v)
    .map(response => response.json())
}

и в вашем компоненте, потребляйте его как наблюдаемый 

this.categorySrv.fetchCategories().subscribe( (response: any) => {  
 this.categorys = response.results; 
  console.log(this.categorys); // Log here instead of outside the observable  
}, error=> this.error = error)

помните, что все http-запросы (такие как this.http.get) являются асинхронными, либо возвращают наблюдаемые, либо обещают. Таким образом, у вас есть только правильный результат до того, как значение будет выпущено (в случае наблюдаемого) или разрешено (обещание).

0 голосов
/ 03 мая 2018

Это потому, что вы регистрируетесь this.categorys до того, как ответ будет возвращен.

попробуйте с 

    fetchCategorys(){
        this.categorySrv.fetchCategories().then((response: any) => {  
               this.categorys = response.results; 
               console.log(this.categorys); // Log here instead of outside the promise  
        })
        .catch(error=> this.error = error )
        // Remove this console.log()
        console.log(this.categorys);   // <== It is correct to be undefined here because it is not in the success promise
    }

Кроме того, вам необходимо удалить обработчики .then () и .catch () внутри функции fetchCategories() службы. Это должно быть просто - 

fetchCategories(){
    let v = this.page_header();
    return this.http.get(this.categoryURL, v)
        .map(response => response.json())
        .toPromise();
}

Не нужно потреблять обещание в сервисе

...