javascript - 在前端显示数据

Question

我有 api 端点，它通过 id、get/comments/:id 返回评论，
当我在 postman 中测试它时，我得到以下结果:

{
    "id": 401478,
    "page": 1,
    "results": [
        {
            "author": "Gimly",
            "content": "There is some decent fun to be found in _Beyond Anarchy_. It's more _Escape from LA_ than it is _Death Race 2000_, but still an entry in the franchise, which brings me to the core problem of Beyond Anarchy: Is it even really a _Death Race_ movie? The answer is yes, but to go beyond that an ask: Should it have been a _Death Race_ movie? The answer's probably no.\r\n\r\nAs I said to begin with, I had some fun with the movie, but the things that kept bringing it down were its awkward, half-hearted attatchments to the movies in the series that had gone before it. If they had have abandoned those sentiments completely, it probably would have made a better viewing experience, but then, if that had been the case, how could you call it _Death Race 4_? The opposite approach probably would have worked too, having Beyond Anarchy be an actual sequel that follows _Death Race 3_ and what came before in a way that makes sense, but then, it couldn't have been even close to the movie that we got.\r\n\r\nInstead we have _Beyond Anarchy's_ sequel-limbo status, a movie that I don't regret watching, but that also can't really work for people who are fans of the _Death Race_ franchise, or for people who have never even seen a Death Race movie.\r\n\r\n_Final rating:★★½ - Had a lot that appealed to me, didn’t quite work as a whole._",
            "id": "5af426b50e0a2639430091df",
            "url": "https://www.themoviedb.org/review/5af426b50e0a2639430091df"
        }
    ],
    "total_pages": 1,
    "total_results": 1
}

我希望这个resus显示在前端，这是我所做的 这是组件.ts

constructor(private router: ActivatedRoute, private moviesService: MoviesService) {
    this.movie = [];
    this.review = [];
  }

        ngOnInit() {
                this.router.params.subscribe((params) => {
                  // tslint:disable-next-line:prefer-const
                  let id = params['id'];
                  this.moviesService.getReview(id)
                   .then(review => {
                     console.log(review);
                    this.review = review;
                  });
                });
              }
         }

这是service.ts

export class MoviesService {

  reviewUrl = '/comments/';
  private apiUrl = 'http://localhost:8000';
  constructor(private http: Http, private _jsonp: Jsonp) { }

  getReview(id: string): Promise<any> {
    return this.http.get(this.apiUrl + this.reviewUrl + id)
      .toPromise()
      .then(this.handleData)
      .catch(this.handleError);
  }

  private handleData(res: any) {
    const body = res.json();
    console.log(body); // for development purposes only
    return body.result || body || {};
  }
  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for development purposes only
    return Promise.reject(error.message || error);
  }
}

在组件 html 中，这是我所拥有的:

 <div>
    <h1> Comments: {{review.content}} </h1>
    </div>

console.log(review) 在浏览器中显示以下结果:

{id: 401478, page: 1, results: Array(1), total_pages: 1, total_results: 1}
id
:
401478
page
:
1
results
:
Array(1)
0
:
{author: "Gimly", content: "There is some decent fun to be found in _Beyond An…at appealed to me, didn’t quite work as a whole._", id: "5af426b50e0a2639430091df", url: "https://www.themoviedb.org/review/5af426b50e0a2639430091df"}
length
:
1
__proto__
:
Array(0)
total_pages
:
1
total_results
:
1

当我运行应用程序时，评论部分是空白的，没有显示任何内容

comment:

我的代码有什么问题吗？任何我需要改变的帮助或建议都会有帮助

谢谢

Answer 1

您的响应包含一组结果，您需要访问，

 <h1> Comments: {{review.results[0].content}} </h1>

如果要显示全部内容，那么需要使用ngFor，

<div *ngFor="let review of review.results" >
    <h1> Comments: {{review.content}} </h1>
</div>