Angular - Data from array not displaying in Template

Question

someone can explain me, why I have no result on the line:

{{video?.themes[0].nom}}

The template stay empty on that line with no error. I have no problem to read all other values.
Here a screenshot: https://zupimages.net/up/20/10/d20g.png

My Template:

<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>

My Component:

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);
  }
}

Friso Hoekstra · Accepted Answer · 2020-03-07 11:34:18Z

1

The themes property on the object in your console is a string Array. Try {{video?.themes[0]}}

answered Mar 7, 2020 at 11:34

Friso Hoekstra

8852 gold badges9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Philipp Meissner · Accepted Answer · 2020-03-07 11:35:15Z

1

As your console.log(this.video) output in the screenshot suggests the property themes is of type string[], thus does not include a property called nom.

Just display it like so:

{{video?.themes[0]}}

answered Mar 7, 2020 at 11:35

Philipp Meissner

5,4925 gold badges38 silver badges61 bronze badges

1 Comment

Philipp Meissner Over a year ago

Happens to the best ;) Feel free to accept an answer so this question is marked as resolved.

Collectives™ on Stack Overflow

Angular - Data from array not displaying in Template

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related