Angular 从服务到组件的 REST 数据

Question

我需要帮助来弄清楚为什么我的数据没有填充到 HTML 中。我确定这是愚蠢的事情，但我无法弄清楚。如果我遗漏了任何内容，我深表歉意，我很乐意将其包括在内。

以下是控制台结果：

undefined
core.js:13606 Angular is running in the development mode. Call enableProdMode() to enable the production mode.

下面是 JSON 我通过邮递员收到的：

获取：http://localhost:3000/api/posts/

{
    "postName": "Fun in the Sun",
    "postDate": "10/23/1993",
    "caption": "Hear all about my trip to lalaland",
    "mainImage": "https://placeholder.net/20x20",
    "suppementalImage1": "https:// placeholder.net/20x20",
    "suppementalImage2": "https:// placeholder.net/20x20",
    "suppementalImage3": "https:// placeholder.net/20x20",
    "suppementalImage4": "https:// placeholder.net/20x20",
    "suppementalImage5": "https:// placeholder.net/20x20",
    "suppementalImage6": "https:// placeholder.net/20x20",
    "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates deleniti quas dolorem quis nulla debitis praesentium dolores eveniet aliquam! At expedita vel consequatur, sit laboriosam ducimus molestiae recusandae ipsam sunt.Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates deleniti quas dolorem quis nulla debitis praesentium dolores eveniet aliquam! At expedita vel consequatur, sit laboriosam ducimus molestiae recusandae ipsam sunt.Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates deleniti quas dolorem quis nulla debitis praesentium dolores eveniet aliquam! At expedita vel consequatur, sit laboriosam ducimus molestiae recusandae ipsam sunt."
}

posts.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, SubscriptionLike, PartialObserver } from 'rxjs';
import { Post } from '../models/post'
import { map } from 'rxjs/operators'
@Injectable({
  providedIn: 'root'
})
export class PostsService {

  constructor(private http: Http) { }

  private serverApi = 'http://localhost:3000';

  public getAllPosts(): Observable<Post[]> {
    let URI = `${this.serverApi}/api/posts/`;
    return this.http.get(URI)
      .pipe(map(res => res.json()))
      .pipe(map(res => <Post[]>res.posts));
  }

}

最新-posts.component.ts

import { Component, OnInit } from '@angular/core';
import { PostsService } from '../services/posts.service';
import { Post } from '../models/post';
@Component({
  selector: 'app-latest-posts',
  templateUrl: './latest-posts.component.html',
  styleUrls: ['./latest-posts.component.css']
})
export class LatestPostsComponent implements OnInit {
  private posts: Post[] = []; //creats a private variable of posts with type of model List an creates an empty array
  constructor(private postServ: PostsService) { };

  ngOnInit() {
    this.loadPosts()
    console.log(this.loadPosts()); //loads all lists on init
  };

  public loadPosts() {
    this.postServ.getAllPosts().subscribe(response => this.posts = response)
  };


}

最新-posts.component.html

<table id="table">
    <thead>
      <tr>
        <th>Priority Level</th>
        <th>Title</th>
        <th>Description</th>

      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let post of posts">
        <td>{{post.name}}</td>
        <td>{{post.date}}</td>
        <td>{{posts.caption}}</td>
      </tr>
    </tbody>
  </table>

Answer 1

API调用是一个异步函数，需要时间来解决。 HTML 中缺少 ngif，因此 DOM 会在数据到达时更新。

类似

<div *ngIf="posts.length > 0"> Content to render when condition is true.</div>

Answer 2

在您的 API 结果中没有名称为 "posts" 的属性，尽管您已将管道应用到映射 res.posts，这将给您未定义。

相反，您应该 return 仅 json 来自服务。

示例：posts.service.ts

public getAllPosts(): Observable<any> {
    let URI = `${this.serverApi}/api/posts/`;
    return this.http.get(URI)
      .pipe(map(res => res.json()));
  }

如果你想在组件中类型转换你的数据，你可以在订阅它的时候定义它的类型。如下所示。

component.ts

public loadPosts() {
    this.postServ.getAllPosts().subscribe((response: Post[]) => {
       if(Array.isArray(response))
          this.posts = response
       else {
          this.posts = [];
          this.posts.push(response);
       }
    })
 }

Angular 从服务到组件的 REST 数据

Angular REST Data from service to component

rest

angular

angular7