Невозможно распечатать только одно свойство RootObject в Angular 9

Question

Я занимаюсь разработкой веб-приложения с использованием API для потокового программного обеспечения c. Проблема в том, что я могу напечатать полный объект, используя {{obj | json}} но я не могу сделать что-то вроде {{obj.artist.id}}, чтобы показать только идентификатор исполнителя трека. Вот код:

post.ts:

export interface Artist {
    id: number;
    name: string;
    link: string;
    picture: string;
    picture_small: string;
    picture_medium: string;
    picture_big: string;
    picture_xl: string;
    tracklist: string;
    type: string;
}

export interface Album {
    id: number;
    title: string;
    cover: string;
    cover_small: string;
    cover_medium: string;
    cover_big: string;
    cover_xl: string;
    tracklist: string;
    type: string;
}

export interface Data {
    id: number;
    readable: boolean;
    title: string;
    title_short: string;
    title_version: string;
    link: string;
    duration: number;
    rank: number;
    explicit_lyrics: boolean;
    explicit_content_lyrics: number;
    explicit_content_cover: number;
    preview: string;
    artist: Artist;
    album: Album;
    type: string;
}

export interface RootObject {
    data: Data[];
    total: number;
    next: string;
}

posts.component.ts:

import { Component, OnInit } from '@angular/core';

import { RootObject, Artist, Album, Data } from './post';
import { PostsService } from './posts.service';
import { Variable } from '@angular/compiler/src/render3/r3_ast';

@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  providers: [PostsService],
  styleUrls: ['./posts.component.scss']
})
export class PostsComponent implements OnInit {

  obj: RootObject[];

  artist: Artist;

  album: Album;

  data: Data;

  constructor(private postService: PostsService) { }

  ngOnInit(): void {
    this.getPosts();
  }

  getPosts(){
    this.postService.getPosts()
    .subscribe(objs => 
      {if (objs instanceof Array) {
          this.obj = objs;
      } else {
          this.obj = [objs];
      }
  });
  }


}

posts.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';


import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

import { RootObject, Artist, Album, Data } from './post';

@Injectable()
export class PostsService {

  postsUrl = 'https://cors-anywhere.herokuapp.com/https://api.deezer.com/search?q=eminem';

  constructor(
    private http: HttpClient) {}


  getPosts(): Observable<RootObject[]> {
    return this.http.get<RootObject[]>(this.postsUrl);
  }

}

posts.component. html (показать весь объект):

<div *ngIf="obj">
    {{ obj.data | json }}
</div>

Что я должен изменить или добавить в мой posts.component. html или в мои файлы TS, чтобы показать только одно свойство объекта? Извините за новый вопрос ie и спасибо.