参数类型 Observable<User[]> 不可分配给 User[] 类型的参数

Question

我正在尝试调整如下所示的材料示例：

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { User } from '../models/user.model';
import { XService } from './x.service';

@Component({
  selector: 'x-component',
  styleUrls: ['x.component.css'],
  templateUrl: 'x.component.html',
})

export class XComponent {

  constructor(private xService: XService) {
  }

  displayedColumns = ['c1', 'c2', 'c3', 'c4'];
  dataSource = new MatTableDataSource<User>(this.xService.getUsers());

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

}

getUsers() 看起来像这样：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { User } from '../models/user.model';

@Injectable()
export class XService {

  constructor(private http:HttpClient) {}

  private userUrl = 'http://localhost:8080/X';

  public getUsers() {
    return this.http.get<User[]>(this.userUrl);
  }

}

用户模型如下所示：

export class User {

  c1 : string;
  c2 : string;
  c3 : string;
  c4 : string;
}

上面的 REST APIlocalhost:8080/X将产生如下结果：

[ {
  "c1" : 1,
  "c2" : "I",
  "c3" : 244.0,
  "c4" : 0.0,
}, {
 ...
}
]

但不幸的是，如果我尝试通过以下方式构建它：

ng build

我得到以下信息：

Your global Angular CLI version (1.7.1) is greater than your local
version (1.6.3). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
Date: 2018-02-26T11:03:55.196Z                                                       
Hash: 7f10a43625c2473d5bc9
Time: 4417ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 303 bytes [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 bytes [initial] [rendered]
chunk {scripts} scripts.bundle.js, scripts.bundle.js.map (scripts) 69.8 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 163 kB [initial] [rendered]

ERROR in src/app/x/x.component.ts(21,45): error TS2345: 
Argument of type 'Observable<User[]>' is not assignable 
to parameter of type 'User[]'.
Property 'includes' is missing in type 'Observable<User[]>'.

基于这些例子，我会说它应该有效，但显然它没有。问题是：有人可以提示/提示在哪里搜索或可能是什么问题吗？

更新：

将 getUsers() 更改为此后（根据 axl 代码的建议）

[ {
  "c1" : 1,
  "c2" : "I",
  "c3" : 244.0,
  "c4" : 0.0,
}, {
 ...
}
]

期间我收到以下错误消息ng build：

ERROR in src/app/x/x.component.ts(21,45): error TS2345: 
Argument of type 'Subscription' is not assignable to 
parameter of type 'User[]'.
Property 'includes' is missing in type 'Subscription'.

Answer 1

因此，在更深入地研究这个问题之后，我找到了以下解决方案：

首先，服务中的 getUsers 方法如下所示：

public getUsers() : Observable<User[]> {
    return this.http.get(this.userUrl).map(response => {
        const users = response.json();
        return users.map((user) => new User(user));
    });
}

使用模型类已得到增强，如下所示：

  constructor(values: Object = {}) {
    Object.assign(this, values);
  }

组件 X 现在看起来像这样：

export class XComponent implements OnInit {

  users: User[] = []

  constructor(private xService: XService) {
  }

  displayedColumns = ['c1', 'c2', 'c3', 'c4'];
  dataSource = new MatTableDataSource(this.users); 


  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  public ngOnInit() {
    this.xService.getUsers()
      .subscribe(
        (users) => {
          this.users = users;
        }
      );
  }
}

通过使用上面的内容，我编译它没有任何错误。