Angular 7 observables 传递给子组件部分工作

Question

我面临一个问题。我使用 Angular 7 并请求从 webapi 获取。它返回一组用户对象。当我想把它写在那里时它可以工作，但是如果我将它传递给子组件它就不能很好地工作。我只得到第一项，并且在无法读取未定义错误的属性“名称”之后。

父组件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>

在seach名片组件ts中：

  @Input() userNamecard: User ;

输出对我来说很奇怪。

它在邮递员中运行良好。

对于我没有将信息传递给子组件的第一个列表，它运行良好，显示数据。

对于第二个列表，它在给出和错误之后显示列表的第一个元素：无法读取未定义的属性“名称”

我错过了什么？

Answer 1

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