Angular - данные из массива не отображаются в шаблоне

Question

кто-то может объяснить мне, почему у меня нет результата в строке: <p>{{video?.themes[0].nom}}</p> Шаблон остается пустым в этой строке без ошибок. У меня нет проблем, чтобы прочитать все другие значения. Вот скриншот: https://zupimages.net/up/20/10/d20g.png

Мой шаблон:

<div class="block5"></div>
<div id="videoContainer">
  <h3>{{video?.titre }}  </h3>
  <p>{{video?.themes[0].nom}}</p>
  <h4 class="pl-4">by <a routerLink="/author/{{video?.auteur_id}}" class="authorLink">{{video?.auteur_nom}}</a></h4>
  <div class="embedresize">
    <div>
      <iframe id="iframe"
              [src]="url | safe"
              frameborder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen>
      </iframe>
    </div>
  </div>
  <p *ngFor="let theme of video?.themes">
    <span>{{theme.nom}}</span>
  </p>
</div>

Мой компонент:

export class VideoComponent implements OnInit {
  video: Video;
  url;

  constructor(private apiService: ApiService, private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.route.params.pipe(
      switchMap(params => this.apiService.getOneVideoByID(params['id'])),
    ).subscribe((video: Video) => {
      this.video = video;
      this.url = "https://www.youtube.com/embed/" + this.getVideoID(this.video.url);
      console.log(this.video);
    });
  }

  getVideoID(url: string) {
    return this.apiService.getYoutubeVideoID(url);
  }
}

Answer 1

Как показывает вывод console.log(this.video) на снимке экрана, свойство themes имеет тип string[], поэтому оно не включает свойство с именем nom.

. Просто отобразите его так:

<p>{{video?.themes[0]}}</p>

Answer 2

Свойство themes объекта в вашей консоли является строковым массивом. Попробуйте <p>{{video?.themes[0]}}</p>