Я довольно новичок в Angular. Попытка использовать данные из конечной точки GET REST следующим образом:
{"employees":[{"empId":"1","name":"emp1","designation":"manager","salary":3000.0},{"empId":"2","name":"emp2","designation":"developer","salary":3000.0}],"addresses":[{"city":"London"},{"city":"Belgium"}]}
Он имеет два списка сотрудников и адресов. В angular я создал классы следующим образом:
export class Employee {
constructor(
) { }
}
export class Address {
constructor(
) { }
}
export class EmployeeDetail {
public employees: Employee[];
public addresses: Address[];
constructor( ) { }
public get employee(): Employee[] {
return this.employees;
}
public get address(): Address[] {
return this.addresses;
}
public set address(addresses: Address[]){
this.addresses = addresses;
}
}
Попытка построить класс EmployeeDetail следующим образом:
getData() {
return this.httpClient.get<EmployeeDetail>('http://localhost:8080/employees')
.pipe(
map(data => {
const employeeList: Employee[] = [];
const addressList: Address[] = [];
var employeeDetail = new EmployeeDetail();
const newList1 : Employee[] = data.employee;
const newList2 : Address[] = data.address;
console.info(newList1);
newList1.forEach(item =>
employeeList.push(Object.assign(new Employee(), item)));
newList2.forEach(item =>
newList.push(Object.assign(new Address(), item)));
employeeDetail.employee = employeeList;
employeeDetail.address = addressList;
return employeeDetail;
})
);
Получение следующего исключения
TypeError: Cannot read property 'forEach' of undefined
at MapSubscriber.project (http-client.service.ts:119)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
Может ли кто-нибудь помочь мне создать объект EmployeeDetail. Спасибо
и data.addresses не data.address
Пожалуйста, используйте отладчик, прежде чем задавать вопросы. Добавление простого debugger; и взгляд на то, что происходит, очень поможет вам в будущем.
Большое спасибо, ребята :) .. это решило проблему. Просто вопрос. даже использование data.employee должно вызывать геттера, верно? Который вернет data.employees
@Reactgular не нужно debugger, достаточно console.info
@Maryannah правда, но если бы мы могли привлечь больше людей к использованию debugger;, качество вопросов здесь повысилось бы. ;)
@Reactgular не могу не согласиться! Но грядет отладка шаблонов, так что у нас все получилось, и это хорошо :)





Вам действительно не нужно вводить всю эту избыточную логику в метод getData().
Как насчет упрощения вашей реализации следующим образом:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
export class Employee {
empId: string;
name: string;
designation: string;
salary: number;
}
export class Address {
city: string;
}
export class EmployeeDetail {
employees: Employee[];
addresses: Address[];
}
@Injectable()
export class EmployeeService {
constructor(private http: HttpClient) {}
getEmployeeData(): Observable < EmployeeDetail > {
return this.http.get < EmployeeDetail > ('/assets/employees.json');
}
}
Мы просто указываем T метода get в HttpClient to EmployeeDetail и возвращаем то, что возвращает этот метод. Это вернет Observable обертку значения типа EmployeeDetail.
Here's a Working Sample StackBlitz for your ref.
Это
data.employeesнеdata.employee.