Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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