使用数组和 httpClient 将 json 数据显示到 angular 中的列表中

Question

我正在使用 Angular 8 来获取 JSON 数据并将其显示为列表，我不知道我错在哪里，因为它没有显示任何错误。并且视图是空的。如果有人有好眼力或理解逻辑。我刚开始 angular 似乎没有发现问题所在。

video.service.ts

private _getUrl= "/api/videos";
constructor(private _http: HttpClient) { }

getVideos(){
 return this._http.get(this._getUrl).pipe(map((response: any) => response.json()));
}

video.center.component.ts

@Component({
  selector: 'app-video-center',
  templateUrl: './video-center.component.html',
  styleUrls: ['./video-center.component.css'],
  providers: [VideoService]
})
videos = [];
constructor(private _videoService: VideoService) { }

  ngOnInit(): void {
   this._videoService.getVideos().subscribe(data => this.videos = data);     
    console.log("videos array", this.videos); // even this is not working !
  }

video.list.component.html

<ul class="nav nav-pills nav-stacked">
    <li (click)="onSelect(video)" *ngFor="let video of videos"><a>{{video.title}}</a></li>
</ul>

Answer 1

在Angular 4.3 中引入了新的HttpClient (@angular/common/http)，默认响应对象是json。所以你不需要映射答案。

因此 return http 响应：


private _getUrl= "/api/videos";
constructor(private _http: HttpClient) { }

getVideos(){
 return this._http.get(this._getUrl);
}

使用数组和 httpClient 将 json 数据显示到 angular 中的列表中

Displaying json Data into a list in angular using an array and httpClient

node.js

json

angular

mongodb

angular-httpclient