Question

我尝试以角度创建搜索页面，通过Angulars $ http服务查询结果并返回已定义的对象。代码看起来类似于Angular文档教程：https://angular.io/tutorial/toh-pt6#final-code-review。

但是我的应用有一些关键区别：

返回的对象是一个包含数组的对象，而不仅仅是一个数组。
我在视图中的表遍历对象内的数组。

这导致了一个问题，即视图中迭代此数组的表会抛出一个＆＃39; null＆＃39;搜索任何内容之前的错误，因此会使整个页面无法正常运行

<tbody>
    <tr *ngFor="let email of (SearchResults$ | async).hits">
        <td><input type="checkbox" (change)="changeSelectedEmailsMap(email)" ></td>
        <td>{{email._source.from}}</td>
        <td>{{email._source.recipient}}</td>
        <td>{{email._source.date | date: 'dd/MM/yyyy hh:mm:ss'}}</td>
        <td>{{email._source.subject}}</td>
        <td><a routerLink="/detail/{{email.id}}" class="btn btn-outline-info btn-sm" role="button">View</a></td>
     </tr>
 </tbody>

目前，这是使用这些结果的页面的唯一部分，但它将在SearchResults $中使用其他变量

我试图完全隐藏表格直到结果出现，使用* ngIf =＆＃34; SearchResults $！== null＆＃34;在整个桌子上。然而，一旦结果出现并且表格显示，它仍然会抛出一个空的错误，这让我相信在桌子拿到一个雄鹅之前对象并没有完全填满。

当变量存在时，有没有办法让表只检查命中？

Component.ts：

export class RepositorySearchComponent implements OnInit {

  @Input() repository: Repository;

  SearchResults$: Observable<EmailSearchResult>;

  private searchTerms = new Subject<string>();

  constructor(private emailService: EmailService) { }

  search(term: string){
    this.searchTerms.next(term);
  }


  ngOnInit() {
    this.SearchResults$ = this.searchTerms.pipe(
      debounceTime(300),

      distinctUntilChanged(),

      switchMap((term: string) => this.emailService.search(term, this.repository.id))
    );
  }
}

Answer 1

使用安全导航操作符，如下所示：

  <td>{{email?._source?.from}}</td>

请注意那里使用的两个运算符，一个位于email之后，另一个位于_source之后

在您使用异步数据的所有<td>标记上使用安全导航操作符。

无法在Angular中的Async observable中迭代数组

1 个答案: