0

Сервер на Node.js (express). Ответ от сервера есть(см.скрин).
http://dropmefiles.com/g3hsw
В чем проблема? Может в сервисе?

warehouses.service.ts

import { Injectable } from '@angular/core';
import { WAREHOUSES } from './warehouse-data';
import { Warehouse } from './Warehouse';
import {Http} from '@angular/http';
import {Response} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class WarehouseService {</pre>

    constructor(private http: Http) {
    }

    getWarehouses(): Observable<Warehouse[]> {
        return this.http.get('http://localhost:3000/api/warehouses')
            .map((resp: Response) => {

                let warehousesList = resp.json().data;
                let warehouses: Warehouse[] = [];
                for (let index in warehousesList) {
                    let warehouse = warehousesList[index];
                    warehouses.push({
                        id: warehouse.id,
                        typeProduct: warehouse.typeProduct,
                        name: warehouse.name,
                        img: warehouse.img,
                        info: warehouse.info,

                        amountProducts: warehouse.amountProducts,

                        humidity: warehouse.humidity,
                        temperature: warehouse.temperature,

                        minHumidity: warehouse.minHumidity,
                        maxHumidity: warehouse.maxHumidity,
                        minTemperature: warehouse.minTemperature,
                        maxTemperature: warehouse.maxTemperature
                    });
                }
                return warehouses;
            })
            .catch((error: any)=> { return Observable.throw(error);});
    }
}

warehouses.component.ts

ngOnInit() {
    this.getWarehouseData();
}

getWarehouseData() {
    this.warehouseService.getWarehouses()
                .subscribe(
                        warehouses => this.warehouses = warehouses,
                        error => {this.error = error; console.log(error);}
                    );

    if(this.warehouses)console.log(this.warehouses.length);               
}

**warehouses.component.html

*ngFor="let warehouse of warehouses"
<li>{{ warehouse.id }}</li>
<li>{{ warehouse.typeProduct }}</li>
<li>{{ warehouse.name}}</li>
...
<li>{{ warehouse.maxTemperature}}</li>
...

Теги нельзя вставлять.

2 ответа 2

1

Попробуйте взять Ваш код в div с директивой *ngIf. Что-то вроде этого:

<div *ngIf="warehouses">
    <div *ngFor="let warehouse of (warehouses | async)">{{ warehouse.id }} </div>
</div>
0

Эту часть кода if(this.warehouses)console.log(this.warehouses.length); следует выполнить в блоке .subscribe();, иначе вы получаете данные не асинхронно.

this.warehouseService.getWarehouses()
                .subscribe(
                        warehouses => {this.warehouses = warehouses;
                             if(this.warehouses)console.log(this.warehouses.length);},
                        error => {this.error = error; console.log(error);}
                    );

В HTML пробуйте так

<div *ngFor="let warehouse of (warehouses | async)">{{ warehouse.id }}<div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.