时间戳

首页 > 解决方案 > Angular - 在控制台中获取json值但不在视图中

angular - Angular - 在控制台中获取json值但不在视图中

问题描述

电影/id/external_ids?api_key=myapikey

{"id":335984,"imdb_id":"tt1856101","facebook_id":"BladeRunner2049","instagram_id":"bladerunnermovie","twitter_id":"bladerunner"}

想要显示所有社交 id 的值，例如 facebook、insta 和 twitter。不知道我在做什么

零件：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import { MoviesService } from '../movies.service';

@Component({
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.css']
})
export class MovieComponent implements OnInit {
  movie: Object;
  external_ids: Array<Object>;
  constructor(
    private _moviesServices: MoviesService,
    private router: ActivatedRoute      ) {

  }

  ngOnInit() {
    this.router.params.subscribe((params) => {
      const id = params['id'];
      this._moviesServices.getMovie(id).subscribe(movie => {
        this.movie = movie;
      });
      this._moviesServices.getExternalIds(id).subscribe((res: any) => {
        console.log(res.facebook_id);
        this.external_ids = res.external_ids;
      });
    })

  }
}

HTML

<p  *ngFor="let social of external_ids" class="text-primary" >
        <span *ngIf="social.facebook_id.length > 0" class="mr-3">
      {{social.facebook_id}}
      </span>
    </p>

标签： angularangular6angular7themoviedb-api

解决方案

你试图ngFor在一个对象上使用。ngFor只能遍历数组。似乎更容易直接在 UI 中显示它们，external_ids.facebook_id但如果你真的想ngFor通过循环对象来显示所有这些，你可以使用Object.keys来获取一个数组ngFor

Object.keys首先从您的组件中公开。

objectKeys = Object.keys;

然后在你的 HTML 中使用它

<p *ngFor="let social of objectKeys(external_ids)" class="text-primary">
    {{external_ids[social]}}
</p>

我已经删除了ngIf您想要显示所有社交 ID 的假设。

如果您想id从您的对象中删除 （因为它看起来像一个用户 id 而不是社交 id）

this._moviesServices.getExternalIds(id).subscribe((res: any) => {
    const {id, ...external_ids} = res;
    this.external_ids = external_ids;
});

编辑：虽然上述方法可行，但您也可以使用KeyValuePipe将对象转换为数组以便对其进行迭代。这样你就不需要使用Object.keys

<p *ngFor="let social of external_ids | keyvalue" class="text-primary">
    {{social.value}}
</p>

注意：该keyValue方法适用于 Angular 6+

这是StackBlitz上的一个工作示例。

推荐阅读