使用 HttpClient angular 4 获取对象并将其称为组件

Question

我没有练习并试图复习 Angular。我想返回一个对象并将其呈现在 HTML 文件中。

服务：

@Injectable()
export class NameService {

    url:string = "";

  constructor(private http: HttpClient) { }


    public getActivities(): Observable<UserModel> {
        return this.http.get(this.url);
    }


}

组件：

export class NameComponent implements OnInit {

    users:UserModel;

  constructor(private nameService: NameService) { }

  public getUsers(){
      this.users = this.nameService.getActivities()
          .subscribe(res => {this.users = res});
  }

  ngOnInit() {
      this.getUsers();
  }

错误Type 'Subscription' is not assignable to type 'UserModel'.

和

Type 'Observable<Object>' is not assignable to type 'Observable<UserModel>'.

HTML：

<ul>
        <li *ngFor="let user of users; let i = index">
            {{i + 1}} - {{user.id}}
            {{i + 1}} - {{user.first_name}}
            {{i + 1}} - {{user.last_name}}
            {{i + 1}} - {{user.email}}
            {{i + 1}} - {{user.ip}}
        </li>
    </ul>

和 JSON：

{
    "id": 11,
    "first_name": "Blakelee",
    "last_name": "Gillingham",
    "email": "bgillinghama@engadget.com",
    "gender": "Female",
    "ip_address": "234.175.225.8"
}, {
    "id": 12,
    "first_name": "Tally",
    "last_name": "Loraine",
    "email": "tloraineb@marriott.com",
    "gender": "Female",
    "ip_address": "50.20.33.244"
},

我正在使用 Angular 5，但使用 Angular 4 实践，因为这样做会破坏我的其他应用程序。

-----------------更新 1-------------------

我加了users:UserModel[]=[];

然后我添加了

public getActivities(): Observable<UserModel[]> {
        return this.http.get<UserModel[]>(this.url);
    }

ide 停止抱怨，但现在我又回到了错误：

No provider for HttpHandler!

------------------编辑 2------------------------

Answer 1

问题是，HttpClient 返回的是Object，因此错误消息是正确的。你想告诉 Angular 你的响应是UserModel 类型，而不是Object 类型。除此之外，您会得到一个UserModel 的数组（我认为这是您的问题中的一个错字）。所以你的请求应该是这样的：

public getActivities(): Observable<UserModel[]> {
    return this.http.get<UserModel[]>(this.url);
}

此外，您的订阅组件看起来就像 Sajeetharan 指出的那样：

public getUsers(){
  this.nameService.getActivities()
    .subscribe(res => this.users = res);
}

编辑：并在组件中声明您的 users 为

users:UserModel[] = [];

阅读更多关于（不是那么新的）HttpClient 和类型检查的信息：https://angular.io/guide/http#typechecking-the-response

编辑 2：

至于后续错误，请确保您已导入正确的模块（HttpClientModule）并在BrowserModule之后声明它：Error: No provider for HttpHandler in angular2

Answer 2

如下修改，

export class NameComponent implements OnInit {

    users:UserModel[]=[];

  constructor(private nameService: NameService) { }

  public getUsers(){
     this.nameService.getActivities()
          .subscribe(res => {this.users = res});
  }

  ngOnInit() {
      this.getUsers();
  }