Angular 5 HTTP加载json文件错误

Question

新闻资讯

import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { INews } from './inews';
    import { Observable } from 'rxjs';
    import { map } from 'rxjs/operators';

    @Injectable({
      providedIn: 'root'
    })
    export class NewsserviceService {
      public _url = 'http://localhost/admin/demo/api/get_posts/';
      constructor( public http: HttpClient) { }
      getNews(): Observable<INews[]> {
        return this.http.get<INews[]>(this._url).pipe(map(res => res.json()));
      }
     }

newsComponent.ts

import { Component, OnInit } from '@angular/core';
import { NewsserviceService } from './newsservice.service';

@Component({
  selector: 'app-news-ticker',
  templateUrl: './news-ticker.component.html',
  styleUrls: ['./news-ticker.component.scss']
})
export class NewsTickerComponent implements OnInit {
  public news: any[];
  constructor(private newsservice: NewsserviceService) { }

  ngOnInit() {
    this.loadNews();
  }
  loadNews(): void {
    this.newsservice.getNews().subscribe(res => this.news = res);

  }

}

新闻组件.html

<section class="news-ticker">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="ticker">
          <strong class="pull-left">news flash</strong>
          <ul>
            <li *ngFor='let news of news'>
              {{news.content}}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

控制台错误

错误类型错误：node_modules不是一个函数_esm5（_next）在node_modules。/node_modules/rxjs/_esm5/内部/运营商/_esm5mergeMap.js.MergeMapSubscriber.notifyNext（node_modules）在_esm5。/mergeMap.js:136/rxjs/InnerSubscriber.push./内部/_next（node_modules）在_esm5。/InnerSubscriber.js.InnerSubscriber./rxjs/InnerSubscriber.js:20/内部/运营商/node_modulesInnerSubscriber.push.（_esm5）在_next。/Subscriber.js.Subscriber.next/rxjs/Subscriber.js:93/内部/node_modules（_esm5）在node_modules。/map.js.MapSubscriber./rxjs/map.js:81/内部/运营商/_esm5MapSubscriber.push.（node_modules）在_esm5。/Subscriber.js.Subscriber.next/rxjs/Subscriber.js:93/内部/_next（Subscriber.js:93）在MergeMapSubscriber.push.。/FilterSubscriber.push./rxjs/filter.js.FilterSubscriber./内部/运营商/newsservice.service.ts:14（MapSubscriber.push.）在map.js.MapSubscriber.。/filter.js:85/rxjs/FilterSubscriber.push./内部/map.js:75Subscriber.js.Subscriber.next（MapSubscriber.push.）在Subscriber.js.Subscriber.next。/res.json/rxjs/MapSubscriber.project/内部/Subscriber.js:93（MapSubscriber.push.）

Answer 1

你最好写一些关于你的问题的信息，不管你的问题指的是什么

 getNews(): Observable<INews[]> {
            return this.http.get<INews[]>(this._url).pipe(map(res => res.json()));
      }

在您的服务中，将其更改为：

   getNews():Observable {
        return this.http.get(this._url)
      }

由于该方法为我们提供了可观察的，我们应该在目标组件中订阅它，您可以这样做：

loadNews() {
    this.newsservice.getNews().subscribe(res => this.news = res);

  }