Question

我正在开发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的教程应用，他们的英雄以Observable的形式返回，应该是相同的...

为什么会出现此错误？

Answer 1

哦，没关系。杀死了Angular服务器并重新启动它，现在它可以正确返回...需要记住，这似乎是调试Angular的第一步。

Angular Service不会通过RxJS检索数组对象

1 个答案: