Angular http get ничего не делает - PullRequest
Новая
       107

Angular http get ничего не делает

1 голос
/ 03 мая 2020

Я изучаю Udemy и не могу понять, как использовать HTTP GET в Angular. Я создал компонент с именем posts, вот код posts.component.ts: 

import { Http } from '@angular/http';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {
  posts: any[];

  constructor(http: Http) {
    http.get('http://jsonplaceholder.typicode.com/posts')
    .subscribe( response => {
      this.posts = response.json();
    });
   }

  ngOnInit() {
  }
}

И есть posts.component. html

<ul class="list-group">
  <li
  *ngFor="let post of posts"
  class="list-group-item">
  {{post.title}}
</li>
</ul>

У меня также есть импортировал HttpModule в app.module.ts, но я не могу найти какие-либо результаты, мой сайт на localhost: 4200 такой же, как и до того, как я добавил «сообщения». Также нет никаких ошибок во время компиляции или в консоли веб-браузера. Это то, что находится в моей консоли веб-браузера: 

DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Angular is running in the development mode. Call enableProdMode() to enable the production mode.

DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

1 Ответ

0 голосов
/ 03 мая 2020

Не используйте старый модуль для запросов http: 

import { Http } from '@angular/http';

Вместо этого используйте новый модуль: 

import { HttpClient } from '@angular/common/http';

Вот пример: https://stackblitz.com/edit/angular-http-client-first-example?file=src / app / app.component.ts

Редактировать: Используйте эту версию: 

  constructor(
      private readonly _http: HttpClient) {
    this.getPosts().subscribe(res => {
      this.posts = res;
    });
  }

  getPosts(): Observable<any[]> {
    console.log('getPosts');
    return this._http.get('https://jsonplaceholder.typicode.com/todos').pipe(
        map<any, any[]>(response => {
            console.log(response);
            return response;
          })
      );
  }
...