Question

Angular v5

我的搜索组件从返回搜索结果承诺的服务中检索数据。在页面上加载我的＆＃34; searchResults＆＃34;数组为空（= new Array（）），直到在页面中调用搜索并返回promise。

* ngFor因为上面提到的＆＃34; searchResults＆＃34;而引发错误在页面加载时为空。在填充搜索结果之前，我该如何规避这一点？

服务：

getSearchResults(searchTerm: string, resourceType: string, pageSize: number = 9999, pageNumber: number = 1): Promise<object> {
const search = {
  Term: searchTerm,
  ResourceType: resourceType,
  PageSize: pageSize,
  PageNum: pageNumber,
  ModuleId: moduleId
};
const searchHeader = {headers: this.getHttpHeaders()};
const promise = new Promise((resolve, reject): void => {
  this.http.post(this.apiRoot, search, searchHeader).toPromise()
    .then(response => {
      resolve(JSON.parse(response['_body']));
    })
    .catch(error => {
      reject(error);
    });
});
return promise;
}

组件：

submitSearch(): void {
this.siteSearchService.getSearchResults(this.searchString, this.selectedResourceType)
  .then(response => {
    let dto: DTO.SearchResults = <DTO.SearchResults>response;
    this.totalHits = dto.TotalHits;
    this.searchResults = dto.Results;
  }).catch(error => {
    console.log(error);
  });
}

模板：

<div class="row" *ngIf="searchResults" style="margin:25px;">
    <div class="col-xs-12 result-row" *ngFor="let result in searchResults">
      <div class="row">
        <div class="col-xs-12 col-sm-10">
          <a href [href]="result.Url" target="_blank" class="search-result-link">
            <h3>{{result.Title}}</h3>
          </a>
          <p>{{result.Description}}</p>
        </div>
        <div class="col-xs-12 col-sm-2">
          ToDo: Button
        </div>
      </div>
    </div>
  </div>

Answer 1

只需尝试使用*ngIf="searchResults"，也可以使用代码替换 *ngFor="let result in searchResults"与*ngFor="let result of searchResults"

。{

希望能解决您的问题

Answer 2

我的修复方法是使用async管道。这将让Angular知道在尝试使用ngFor循环之前等待结果到达。我会将searchResults变成一个在每次搜索结束时发出结果的observable。

在视图中，每次单击按钮时都会发出一个事件：

<input #searchInput />
<button (click)="searchSubject.next(searchInput.value)">Search</button>

在组件类中：

// Will emit each new search term when user clicks search button
searchSubject = new Subject<string>();

// Will trigger the search each time the searchSubject emits:
searchResults = searchSubject
                 .switchMap(term => this.siteSearchService.getSearchResults(term));
                 .map(response => response.Results)
                 .catch(err => console.error(err));

最后修改模板以使用管道：

<div *ngFor="let result of searchResults | async">

async pipe将订阅searchResults并开始收听点击事件。一旦您的组件被销毁，Angular将取消订阅。

使用新数组初始化* ngFor（）

2 个答案: