Я изучаю Angular 4 HTTP онлайн и практикуюсь в angular 7, поэтому я думаю, что я получаю эту ошибку

Question

@Component({
  selector: 'posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css']
})
export class PostsComponent  {
posts : any[];
  constructor(http : HttpClient) {
    http.get('https://jsonplaceholder.typicode.com/posts/1')
    .subscribe(response => {
      this.posts = response.json();
    });
    }

   }

ошибка: свойство 'json' не существует для типа 'Объект'.

Я изучаю Angular 4 онлайн и практикуюсь в Angular 7, и поэтому я Я думаю, что получаю эту ошибку. Пожалуйста, помогите мне избавиться от этой ошибки, чтобы я смог продолжить свой курс.

Answer 1

Angular 4 использовал @angular/http, который как HttpModule пакет для извлечения данных, более новые версии используют @angular/common/http, который имеет HttpClientModule.

HttpClient уже извлекает данные в формате JSON , поэтому вам не нужен метод .json(), потому что ваш ответ уже является json.

@Component({
  selector: "posts",
  templateUrl: "./posts.component.html",
  styleUrls: ["./posts.component.css"]
})
export class PostsComponent {
  posts: any[];
  constructor(http: HttpClient) {
    http
      .get("https://jsonplaceholder.typicode.com/posts/1")
      .subscribe(response => {
        this.posts = response;
      });
  }
}

Также в будущем лучше использовать конструктор, чтобы вводить только зависимости и использовать OnInit Жизненный цикл для извлечения данных из API

@Component({
  selector: "posts",
  templateUrl: "./posts.component.html",
  styleUrls: ["./posts.component.css"]
})
export class PostsComponent implements OnInit {
  posts: any[];
  constructor(private readonly http: HttpClient) {}

  ngOnInit() {
    this.http
      .get("https://jsonplaceholder.typicode.com/posts/1")
      .subscribe(response => {
        this.posts = response;
      });
  }
}

Основанный на типе сообщения, извлеченном из json заполнителя, это правильный подход:

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

@Component({
  selector: "posts",
  templateUrl: "./posts.component.html",
  styleUrls: ["./posts.component.css"]
})
export class PostsComponent implements OnInit {
  post: Post;
  constructor(private readonly http: HttpClient) {}

  ngOnInit() {
    this.http
      .get<Post>("https://jsonplaceholder.typicode.com/posts/1")
      .subscribe(response => {
        this.post = response;
      });
  }
}

Обновление. Добавили Stackblitz пример.