В настоящее время я изучаю Angular с помощью некоторого учебника, и я столкнулся с проблемой. Я не совсем понимаю, почему моя консоль выдает ошибку
ERROR in src/app/employee/employee.component.ts:17:24 - error TS2322: Type 'IEmployee' is not assignable to type 'any[]'.17 .subscribe(data => this.employees = data);
Это мой код, которому я следовал из учебника:
export class EmployeeDetailComponent implements OnInit {
public employees = [];
constructor(private _employeeService : EmployeeService) { }
ngOnInit(): void {
this._employeeService.getEmployees()
.subscribe(data => this.employees = data);
console.info(this.employees);
}
}
Запрос Http должен возвращать observable с типом интерфейса IEmployees, который я сделал, но он не работает, если я не сделаю этого public employees:any = []
. Это решило мою проблему, но я не понимаю почему, так как в учебнике это работает без него. Моя вторая проблема заключается в том, что я пытаюсь консольно зарегистрировать массив своих сотрудников после того, как получу свои данные с помощью http-запроса, чтобы увидеть, какой это тип данных, но он кажется пустым (я также пытался this.employees[0].name
). Почему я не могу получить доступ к этому массиву в ngOnInit()
, но в моем html-файле я могу сделать это с помощью ngFor
и получить доступ к свойствам объекта.
Это интерфейс IEmployees.
export interface IEmployee {
id: number,
name: string,
age : number
}
При объявлении массива сотрудников
сделай это
public employees: IEmployee = [] ;
вместо этого
public employees = []
;
Это связано с тем, что ваш сервис перенастраивает данные типа IEmployee
, а используемая вами переменная не имеет этого типа.
затем проверьте, должна ли быть какая-то разница в свойствах данных, которые возвращает ваша служба, и интерфейсе, который вы объявили
this.employees[0]
находится undefined
в ngOnInit
, потому что асинхронный запрос завершается позже, чем завершается ngOnInit
. Таким образом, значение this.employees
будет присвоено после того, как ngOnInit
будет выполнено. ngFor
также может отображать значения свойства после получения асинхронного ответа.
Ах, это имеет смысл, поэтому, если я хочу манипулировать этими данными, я могу сделать это только в методе подписки?
Да, содержимое subscribe
вызывается при получении ответа. Там вы можете манипулировать полученными данными.
Кажется, вы не уверены, собираетесь ли вы получить один объект Employee или массив сотрудников.
Вы объявили метод getEmployees в службе Employee для возврата Observable<Employee>.
Если ваш API возвращает массив сотрудников, измените метод getEmployees таким образом, чтобы он возвращал Observable<Employee[]>.
Если ваш API возвращает один объект Employee, измените функцию стрелки на следующую: данные => this.employees = [данные].
Чтобы дополнительно регистрировать вывод на консоль, измените функцию стрелки на: данные => { console.info (данные); // устанавливаем this.employees;}
Я забыл упомянуть об этом, но я уже пробовал это раньше, я получаю это `ОШИБКА в src/app/employee/employee.component.ts:12:10 - ошибка TS2739: тип 'undefined []' отсутствуют следующие свойства из тип 'IEmployee': идентификатор, имя, возраст 12 государственных служащих: IEmployee = [] ; `