1

пытаюсь вывести список заказов, там поля: номер заказа, дата и ID покупателя. не пойму, как вместо ID покупателя на клиенте отображать ФИО? список покупателей и список заказов - это 2 сервиса.

    import { Component, Input, OnInit} from '@angular/core';
import { Person } from './person';
import { Order } from './order';
import { OrderService } from './order.service';
import { Observable } from 'rxjs/Observable';
import { Http, Response, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'list-order',
  template: `      
    <ul>
      <li *ngFor="let order of orders">
        {{order.dateOrder}} {{order.personId}} 
      </li>
    </ul>            
  `,
  providers: [OrderService, PersonService]
})

export class ListOrderComponent implements OnInit {
  orders: Order[];
  persons: Person[];
  http: Http;

  constructor(private orderService: OrderService, private personService: PersonService) { }

  ngOnInit(): void {
    this.orderService.getAllOrders().subscribe(orders => this.orders = orders);
  }
}

person.service.ts:

import { Injectable } from '@angular/core';
import { Person } from './person';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class PersonService {

  constructor (private http: Http) {} 

  getPersons(): Observable<any> { 
    return this.http.get('http://localhost:8080/persons').map(res => res.json())
  }
  }

с бэкенда возвращается ID и ФИО человека

5
  • 1
    Вы бы хоть часть кода показали бы чтоли...
    – MihailPw
    28 мая 2017 в 9:09
  • перед выводом получи из второго сервиса фио по ID и выведи его
    – Grundy
    28 мая 2017 в 9:33
  • прошу прощения.
    – Kate
    28 мая 2017 в 9:50
  • Что у вас есть в PersonService?
    – MihailPw
    28 мая 2017 в 10:18

1 ответ 1

1

Вам требуется загружать сначала данные о сотрудниках, после данные о заказах (это требуется для того, чтобы быть уверенными, что на момент получения данных о заказах уже будем иметь данные о сотрудниках).

Далее - при получении необходимых данных просто у каждого заказа добавить необходимые дополнительные филды (personName, например) и перемапить данные с их заполнением.

@Component({
  selector: 'list-order',
  template: `      
    <ul>
      <li *ngFor="let order of orders">
        {{order.dateOrder}} {{order.personName}} 
      </li>
    </ul>            
  `,
  providers: [OrderService, PersonService]
})

export class ListOrderComponent implements OnInit {
  orders: [];
  http: Http;

  constructor(private orderService: OrderService, private personService: PersonService) { }

  ngOnInit(): void {
    this.personService.getPersons().subscribe(persons => {
      this.orderService.getAllOrders().subscribe(orders => {
        this.orders = orders.map(order => {
          let orderExtended = order;
          orderExtended.personName = persons.find(person => person.Id === order.personId);
          return orderExtended;
        });
      });
    });
  }
}

Либо можно выполнять запросы данных о сотрудниках и о заказах вместе:

export class ListOrderComponent implements OnInit {
  private allOrders: Order[];
  private allPersons: Person[];
  orders: [];
  http: Http;

  constructor(private orderService: OrderService, private personService: PersonService) { }

  ngOnInit(): void {
    this.personService.getPersons().subscribe(persons => {
      this.allPersons = persons;
      tryFillOrders();
    });
    this.orderService.getAllOrders().subscribe(orders => {
      this.allOrders= orders ;
      tryFillOrders();
    });
  }

  private tryFillOrders() {
    if (!this.allOrders || !this.allPersons) {
      return;
    }

    this.orders = this.allOrders.map(order => {
      let orderExtended = order;
      orderExtended.personName = this.allPersons.find(person => person.Id === order.personId);
      return orderExtended;
    });
  }
}

Но

Лично я считаю, что это решение выглядит некрасивым и непрактичным. Если есть возможность, я бы поработал с сервером и добавлял маппинг необходимых филдов на сервере непосредственно.

13
  • спасибо! значит, сделаю на сервере
    – Kate
    28 мая 2017 в 10:41
  • @Kate к слову, если вы на .NET пишите, AutoMapper с легкостью поможет вам без дополнительных конфигураций смаппить необходимый ответ :)
    – MihailPw
    28 мая 2017 в 10:44
  • @AGS17 Зачем мапить, если в объекте order должно быть поле person?
    – Alex78191
    28 мая 2017 в 17:40
  • @Alex78191 о чем вы?
    – MihailPw
    28 мая 2017 в 17:43
  • @AGS17 вы же предлагали мапить
    – Alex78191
    28 мая 2017 в 17:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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