Я пытаюсь создать страницу поиска в angulars, которая запрашивает результаты через Angulars $ http Service и возвращает определенный объект. Код выглядит аналогично учебному пособию Угловая документация: https://angular.io/tutorial/toh-pt6#final-code-review.
Однако у моего приложения есть несколько ключевых отличий:
- Возвращаемый объект - это объект, содержащий массив, а не просто массив.
- Моя таблица в представлении перебирает массив внутри объекта.
Это вызывает у меня проблему, когда таблица в представлении, которое перебирает этот массив, выдает ошибку 'null', прежде чем что-либо искать, и поэтому нарушает работу всей страницы
<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 = "SearchResults $! == null" для всей таблицы. Однако он все равно выдает нулевую ошибку при получении результатов и отображении таблицы, заставляя меня поверить, что объект не заполняется полностью до того, как таблица подверглась тщательному анализу.
Есть ли способ, чтобы таблица проверяла только попадания, когда переменная существует?
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))
);
}
}