Блог

Я работаю над приложением Angular (моим первым реальным приложением). У меня настроены базовые представления и структура, при этом непосредственно в классе создаются только ненужные данные. Я не пытаюсь настроить службы, которые будут возвращать наблюдаемые ненужные данные, затем я изменю их, чтобы подключиться к API и вернуть реальные данные.

В любом случае, я получаю странную ошибку, которую я не понимаю в некоторых службах. У меня есть служба, которая получает данные компании следующим образом:

 import {Injectable} from '@angular/core';
import {CompanyData} from './Classes/company';
import {Observable, of} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CompanyService {

  constructor() {
  }

  GetCompany(): Observable<CompanyData> {
    return of({ID: 'temp id', Name: 'Test Company'});
  }
}
  

Используется в компоненте, подобном этому:

 import {Component, OnInit} from '@angular/core';
import {CompanyData} from '../Classes/company';
import {CompanyService} from '../company.service';

@Component({
  selector: 'app-company-data',
  templateUrl: './company-data.component.html',
  styleUrls: ['./company-data.component.css']
})
export class CompanyDataComponent implements OnInit {

  Company: CompanyData;

  constructor(private companyService: CompanyService) {
  }

  ngOnInit() {
    this.GetCompany();
  }

  GetCompany(): void {
    this.companyService.GetCompany().subscribe(company => this.Company = company);
  }
}
  

Это работает просто отлично, и данные компании для нежелательной компании отображаются ожидаемым образом, точно так же, как это было при создании объекта в компоненте.

Далее, у меня есть пользовательский сервис, который выглядит следующим образом:

 import {Injectable} from '@angular/core';
import {Observable, of} from 'rxjs';
import {User} from './Classes/user';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor() {
  }

  GetUsers(): Observable<User[]> {
    return of([
      {
        ID: 'user id',
        CompanyID: 'Company ID',
        Email: 'some@email.com',
        Permissions: 10,
        Username: 'Some Username'
      }
    ]);
  }
}
  

Реализовано в компоненте следующим образом:

 import {Component, OnInit} from '@angular/core';
import {User} from '../Classes/user';
import {UserService} from '../user.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  Users: User[];

  constructor(private userService: UserService) {
  }

  ngOnInit() {
    this.GetUsers();
  }

  GetUsers(): void {
    this.userService.GetUsers().subscribe(users => this.Users = users);
  }

}
  

Однако это приводит к «отсутствию данных» в представлении. Когда я загружаю это представление в приложение, я получаю эту ошибку в консоли:

 ERROR TypeError: this.userService.GetUsers is not a function
    at UsersComponent.push../src/app/users/users.component.ts.UsersComponent.GetUsers (users.component.ts:21)
    at UsersComponent.push../src/app/users/users.component.ts.UsersComponent.ngOnInit (users.component.ts:17)
    at checkAndUpdateDirectiveInline (core.js:20665)
    at checkAndUpdateNodeInline (core.js:21929)
    at checkAndUpdateNode (core.js:21891)
    at debugCheckAndUpdateNode (core.js:22525)
    at debugCheckDirectivesFn (core.js:22485)
    at Object.eval [as updateDirectives] (UsersComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:22477)
    at checkAndUpdateView (core.js:21873)
  

Единственное различие, которое я вижу, заключается в том, что один является массивом, а другой — отдельным объектом, но я не понимаю, почему это имело бы значение, не так ли? Я просмотрел учебное приложение для Angular, и их heroes возвращаются как наблюдаемые, которые должны быть одинаковыми…

Почему я получаю эту ошибку?

Тьфу, неважно. Отключил сервер Angular и перезапустил его, и теперь он возвращается корректно… Нужно помнить, что это, похоже, первый шаг goto для отладки Angular.