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

问题描述

我正在尝试调整 material 示例，如下所示:

I'm trying to adapt the material examples like the following:

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() 看起来像这样:

The getUsers() looks like this:

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 API localhost:8080/X 将产生如下结果:

The above REST API localhost:8080/X will result in something like this:

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

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

but unfortunately if I try to build it via:

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[]>'.

根据示例，我会说它应该可以工作，但显然没有.问题是:有人可以提示/提示搜索的位置或可能存在的问题吗?

Based on the examples I would say it should be working but obviously it does not. The question is: Can someone give a hint/tip where to search or what the problem might be?

更新:

将 getUsers() 更改为此后(根据 axl-code 的建议)

After changing the getUsers() into this (By suggestion of axl-code)

public getUsers() {
    return this.http.get<User[]>(this.userUrl).subscribe((data: any) => {
       return data;
    });
 }

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

I got the following error message during 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'.

推荐答案

根据你提供的代码，试试这个方法

Based on your provided code, try it this way

export class XComponent {
 dataSource = new MatTableDataSource<User[]>(); // note that you are just instantiating a
//MatTableDataSource here. There's no data yet. Add it in the constructor
// Note that in your original code, you are doing this <User> instead of <User[]>
  constructor(private xService: XService) {
   this.xService.getUsers().subscribe ( users => {
             this.dataSource.data = users;
       })
  }

  displayedColumns = ['c1', 'c2', 'c3', 'c4'];

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

您无需更改 getUsers() 中的任何内容.将它作为 Observable 返回应该可以工作，因为您在 XComponent 中订阅了它，因此您可以获得Users[]".

You don't need to change anything in your getUsers(). Returning it as Observable<Users[]> should work because you are subscribing to it in your XComponent, thus you can get just the "Users[]".

这篇关于参数类型 Observable<User[]>不能分配给 User[] 类型的参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！