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

问题描述

我正在尝试修改如下的材料示例:

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代码的建议)

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<Users[]>应该可以工作，因为您正在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 []类型的参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！