Wordpress Angular 5 HTTP加载json文件错误
新闻服务.tsWordpress Angular 5 HTTP加载json文件错误,wordpress,api,http,angular5,Wordpress,Api,Http,Angular5,新闻服务.ts 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({
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()));
}
}
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);
}
}
newscomponent.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>
新闻快讯
-
{{news.content}
控制台错误
错误类型错误:res.json不是函数
在MapSubscriber.project(newservice.service.ts:14)
在MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber.\u next(map.js:75)
在MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next(Subscriber.js:93)
在MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next(map.js:81)
在MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next(Subscriber.js:93)
在FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber.\u下一步(filter.js:85)
在FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next(Subscriber.js:93)
在MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext(mergeMap.js:136)
在InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber.\u下一步(InnerSubscriber.js:20)
在InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next(Subscriber.js:93)您最好写一些关于您的问题的信息,但您的问题是指
getNews(): Observable<INews[]> {
return this.http.get<INews[]>(this._url).pipe(map(res => res.json()));
}
由于该方法提供了可观察性,我们应该在目标组件中订阅它,您只需执行以下操作:
loadNews() {
this.newsservice.getNews().subscribe(res => this.news = res);
}
当我改为使用上述代码处理本地json文件时,当我使用来自服务器的json api时,显示加载失败:请求的资源上不存在“Access Control Allow Origin”头。因此,不允许访问源“”。
loadNews() {
this.newsservice.getNews().subscribe(res => this.news = res);
}