Как отследить ошибку в angular проекте?

Question

[Некто Нектович]

Хочу вывести список элементов (карточек галереи с разными заголовками).

Соответственно для этого:

Cоздала компоненту user, определила для нее шаблон и входную переменную
из компоненты app в цикле вывожу мои карточки,
зашла в консоль chrome dev tools переменная: user.name = undefined
Карточки выводятся, а тайтлы - нет.

1) Может ли кто-то подсказать в чем ошибка?
2) как отследить с помощью консоли в каком именно файле она локализуется?

*--------------app.component.ts————————*

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html'

})

export class AppComponent {

  users = [

    {name: 'title 1'},

    {name: 'title 2'},

    {name: 'title 3'}

  ]

}

*--------------user.component.html————————*

<div>
  <div>
     <div>
          <span>{{ user.name }}</span>
       </div>
  </div>
</div>

*--------------user.component.ts————————*

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

@Component({

  selector: 'app-user',

  templateUrl: './user.component.html',

  styleUrls: ['./user.component.scss']

})

export class UserComponent{
  @Input() user;
}

*--------------app.component.html————————*

<div>
  <div>
     <app-user *ngFor="let u of users">
          [user]="u"
      </app-user>
   </div>
</div>
</pre>

Вот на всякий случай ссылка на проект

Answer 1

[Ivan Stroykin]

У Вас:

<app-user *ngFor="let u of users">[user]="u"</app-user>

Нужно:

<app-user *ngFor="let u of users" [user]="u"></app-user>

А лучше всего давайте понятные названия:

<app-user *ngFor="let user of users" [user]="user"></app-user>

Рабочий пример - ссылка