类型 'Observable<Todo[]>' 缺少属性答案

【问题标题】：Type 'Observable<Todo[]>' is missing properties类型 'Observable<Todo[]>' 缺少属性
【发布时间】：2020-09-09 18:21:17
【问题描述】：

我正在学习 YT 教程，但由于看不到错误的来源而陷入困境？

错误消息：“Observable”类型缺少“Todo[]”类型的以下属性：length、pop、push、concat 和 25 more.ts(2740)

export class ToDosComponent implements OnInit {

  todos:Todo[];

  constructor(private todoService:TodoService) { }

  ngOnInit(): void {
    this.todos = this.todoService.getTodos();

  }

这是它引用的类

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

import { Todo } from '../models/Todo';


@Injectable({
  providedIn: 'root'
})
export class TodoService {
  todosUrl = 'https://jsonplaceholder.typicode.com/todos';
  todosLimit = '?_limit=5';

  constructor(private http:HttpClient) { }

  getTodos():Observable<Todo[]>{

    return this.http.get<Todo[]>('${this.todosUrl} $ {this.todosLimit}');

  }

【问题讨论】：

你说this.todos 应该是Todos 的数组，然后将Todos 的数组的Observable 分配给它。编译器告诉你正确的事情；这没有意义。

标签： angular typescript

【解决方案1】：

你需要订阅getTodos()函数并在里面赋值this.todos。试试下面的

export class ToDosComponent implements OnInit {
  todos: Todo[];

  constructor(private todoService:TodoService) { }

  ngOnInit(): void {
    this.todoService.getTodos().subscribe(
      response => { this.todos = response },
      error => {
        // always good practice to handle error from HTTP observables
      }
    );
  }
}

Angular HttpClient 的 get() 方法返回一个 observable。因此，当您将其分配给 this.todos 时，您会错误地将 observable 分配给它，而不是来自 HTTP 请求的响应。要访问它，您需要订阅 observable。

【讨论】：