Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Angular Basics Angular Components Structural Directives

Posted by Alexei Ferreira
Alexei Ferreira
13,986 Points

Comments.name are not showing and I can not understand why?

Entry.component.ts:

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


@Component({
    // kebab Case
    selector: 'app-entry',
    templateUrl: 'entry.component.html',
    styleUrls: ['entry.component.css']
})

export class EntryComponent {
    title: string = 'My first Photo';
    photo: string = 'http://placehold.it/800x500?text=Angular Basics';
    description: string = 'A description of My first Photo';
    comments: any[] = [
        { name: "John", comment: "A comment"},
        { name: "Jim", comment: "A comment"},
        { name: "Jen", comment: "A comment"}
    ]
}

Entry.componemt.html:

<h2>{{title}}</h2>
<figure>
    <img src="{{photo}}">
    <figcaption>{{description}}</figcaption>
</figure>
<div class="actions">
    <button type="button" (click)="isLiked = !isLiked" [ngClass]="{liked: isLiked}">ā¤</button>
</div>
<div class="comments">
    <div class="comment" *ngFor="let commment of comments">
        <p><strong>Teste {{comments.name}}</strong>{{comments.comment}}</p>
    </div>
</div>
Daniel H.J. Chen
Daniel H.J. Chen
12,888 Points
Daniel H.J. Chen
Daniel H.J. Chen
12,888 Points

Note the code:

<div class="comment" *ngFor="let commment of comments">
<p><strong>Teste {{comments.name}}</strong>{{comments.comment}}</p>
</div>

You are iterating through the "comments" array and assign each item as "commment". But within the loop, you are trying to access properties of "comments". Check your spelling and make sure you are accessing the right variable, then you should be good to go!

2 Answers

Alexei Ferreira
Alexei Ferreira
13,986 Points
Alexei Ferreira
Alexei Ferreira
13,986 Points

Thanks. hehehe I found the miss typing.

Yashmin Sainju
Yashmin Sainju
3,186 Points
Yashmin Sainju
Yashmin Sainju
3,186 Points

Srs. The same exact problem here. I just named the array commments