Угловые 7 наблюдаемых переходят к дочерним компонентам, работают частично - PullRequest
Новая
       10

Угловые 7 наблюдаемых переходят к дочерним компонентам, работают частично

0 голосов
/ 23 сентября 2019

Я столкнулся с проблемой.Я использую Angular 7 и запрашиваю получить от вебапи.Он возвращает массив пользовательских объектов.Это работает, когда я хочу написать это там, но если я передаю это дочернему компоненту, это не работает хорошо.Я получаю только первый элемент и после свойства Cannot read 'name' неопределенную ошибку.

Родительский компонент 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>

родительский компонент 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);

     }

}

компонент поиска имени html: 

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

в компоненте поиска имени ts: 

  @Input() userNamecard: User ;

Вывод для меня довольно странный.

Хорошо работает в почтальоне.

Для первого списка, в котором я не передаю информацию дочернему компоненту, он работает хорошо, покажите данные.

Для второгоперечислите это показывает первый элемент списка после того, как это дает и ошибка: Невозможно прочитать свойство 'name' из неопределенного

Что я пропустил?

1 Ответ

1 голос
/ 23 сентября 2019

вы называете свойство userNamecard в дочернем компоненте и, используя user в своем html, заменяете его на userNamecard

...