Angular 7 个可观察对象传递给子组件部分起作用

Question

我遇到了一个问题。我使用 angular 7 并请求从 webapi 获取。它返回一组用户对象。当我想把它写在那里时它可以工作但是如果我将它传递给子组件它就不能正常工作。我只得到第一项，并且在 Cannot read 属性 'name' of undefined error.

之后

父组件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' of undefined

我错过了什么？

Answer 1

您在子组件中命名属性 userNamecard，并在 html 中使用 user 将其替换为 userNamecard

Angular 7 个可观察对象传递给子组件部分起作用

Angular 7 observables pass to child component works partially

web-component

observable

angular

angular7