Angular 7 observables pass to child component works partially

Question

I am facing with an issue. I use angular 7 and request a get from a webapi. It gives back an array of User objects. It works when i want to write it out there but if i pass it to the child component it does not work well. I get only the first item and after a Cannot read property 'name' of undefined error.

The parent component html:

<div class="container mt-5">
    <ul class="user__list">
        <li class="user" *ngFor="let user of users$ | async">
          {{ user.name }} - {{ user.id }} 
        </li>
    </ul>

    <ul class="user__list">
       <li class="user" *ngFor="let user of users$ | async">
           <app-search-namecard [userNamecard]="user"></app-search-namecard>
                {{ user.name }} - {{ user.id }} 
       </li>
    </ul>

 </div>

the parent component ts:

  export class SearchComponent implements OnInit {
  searchText: string;
  public users$: Observable<Array<User>>;

      constructor(private route: ActivatedRoute, private searchSevice: SearchService) {
        this.route.paramMap.subscribe((params: ParamMap) => {
          this.searchText = params.get('searchText');
        });
      }

      ngOnInit(): void {
        this.users$ = this.searchSevice.search(this.searchText);

     }

}

the search namecard component html:

<div class="container mt-5">  
  {{ user.name }} - {{ user.id }}   
</div>

in the seach namecard component ts:

  @Input() userNamecard: User ;

The output is quite strange for me.

It works well in postman.

For the first list where i do not pass to the child component the information it works well, show the data.

For the 2nd list it show the first element of the list after it gives and error: Cannot read property 'name' of undefined

What did i miss?

Answer 1

you name the property userNamecard in child component, and using user in your html replace it with userNamecard