title: Initializing *ngFor with a new Array()
body: <p>Angular v5</p>
  
  <p>My search component retrieves data from a service returning a search result promise. On page load my "searchResults" array is empty (= new Array()) until the search is called in page and the promise is returned.</p>
  
  <p>*ngFor is throwing an error because the above mentioned "searchResults" is empty on page load. How do I circumvent this until the search results are populated?</p>
  
  <p>Service:</p>
  
  <pre><code>getSearchResults(searchTerm: string, resourceType: string, pageSize: number = 9999, pageNumber: number = 1): Promise&lt;object&gt; {
  const search = {
    Term: searchTerm,
    ResourceType: resourceType,
    PageSize: pageSize,
    PageNum: pageNumber,
    ModuleId: moduleId
  };
  const searchHeader = {headers: this.getHttpHeaders()};
  const promise = new Promise((resolve, reject): void =&gt; {
    this.http.post(this.apiRoot, search, searchHeader).toPromise()
      .then(response =&gt; {
        resolve(JSON.parse(response['_body']));
      })
      .catch(error =&gt; {
        reject(error);
      });
  });
  return promise;
  }
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>submitSearch(): void {
  this.siteSearchService.getSearchResults(this.searchString, this.selectedResourceType)
    .then(response =&gt; {
      let dto: DTO.SearchResults = &lt;DTO.SearchResults&gt;response;
      this.totalHits = dto.TotalHits;
      this.searchResults = dto.Results;
    }).catch(error =&gt; {
      console.log(error);
    });
  }
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;div class="row" *ngIf="searchResults" style="margin:25px;"&gt;
      &lt;div class="col-xs-12 result-row" *ngFor="let result in searchResults"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-xs-12 col-sm-10"&gt;
            &lt;a href [href]="result.Url" target="_blank" class="search-result-link"&gt;
              &lt;h3&gt;{{result.Title}}&lt;/h3&gt;
            &lt;/a&gt;
            &lt;p&gt;{{result.Description}}&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-12 col-sm-2"&gt;
            ToDo: Button
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
  </code></pre>