Доступ к наблюдаемому объекту в Angular

В настоящее время я изучаю 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
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
151
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

При объявлении массива сотрудников

сделай это

public employees: IEmployee = [] ;

вместо этого

public employees = [];

Это связано с тем, что ваш сервис перенастраивает данные типа IEmployee, а используемая вами переменная не имеет этого типа.

Я забыл упомянуть об этом, но я уже пробовал это раньше, я получаю это `ОШИБКА в src/app/employee/employee.component.ts:12:10 - ошибка TS2739: тип 'undefined []' отсутствуют следующие свойства из тип 'IEmployee': идентификатор, имя, возраст 12 государственных служащих: IEmployee = [] ; `

Alex 14.12.2020 18:23

затем проверьте, должна ли быть какая-то разница в свойствах данных, которые возвращает ваша служба, и интерфейсе, который вы объявили

Lint 14.12.2020 20:21

this.employees[0] находится undefined в ngOnInit, потому что асинхронный запрос завершается позже, чем завершается ngOnInit. Таким образом, значение this.employees будет присвоено после того, как ngOnInit будет выполнено. ngFor также может отображать значения свойства после получения асинхронного ответа.

Ах, это имеет смысл, поэтому, если я хочу манипулировать этими данными, я могу сделать это только в методе подписки?

Alex 14.12.2020 18:28

Да, содержимое subscribe вызывается при получении ответа. Там вы можете манипулировать полученными данными.

Milan Tenk 14.12.2020 18:36

Кажется, вы не уверены, собираетесь ли вы получить один объект Employee или массив сотрудников.

Вы объявили метод getEmployees в службе Employee для возврата Observable<Employee>.

Если ваш API возвращает массив сотрудников, измените метод getEmployees таким образом, чтобы он возвращал Observable<Employee[]>.

Если ваш API возвращает один объект Employee, измените функцию стрелки на следующую: данные => this.employees = [данные].

Чтобы дополнительно регистрировать вывод на консоль, измените функцию стрелки на: данные => { console.info (данные); // устанавливаем this.employees;}

Другие вопросы по теме