title: how to fix "value below was evaluated just now" in angular 7
body: <p>I keep getting an "i" icon beside the array </p>
  
  <p><a href="https://i.stack.imgur.com/FpL6a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FpL6a.png" alt="enter image description here"></a></p>
  
  <p>the ngFor doesn't display the items on first load unless I click the pagination. then that's the time it will show up the whole list.</p>
  
  <p>is it because of that <code>value below was evaluated just now</code> , anyway to fix this in angular 7 ?</p>
  
  <p>What my code does for this component is that,
  1) At the main component template i have a property binding 
  e.g <code>[thisIstheDataForThisComponent] = thisIsTheData</code></p>
  
  <p>2) then in the component for this code, i loop over the contents of <code>thisIstheDataForThisComponent</code> since it is labeled as an @Input Decorator in the component.</p>
  
  <p>I have done this same style of property binding in other parts of the application, but only this array is not displaying on first load</p>
  
  <p>Here's my <strong>Service</strong> code to pull data </p>
  
  <pre><code>  public getData(url, headers): Observable&lt;any&gt;{
      return this.http.get(config.SERVICE_URL + url, headers)
      .pipe(
        delay(300),
        map((data: any) =&gt; (data)),
        catchError(this.handleError)
      )
    }
  </code></pre>
  
  <p>here's my code in the <strong>parent</strong> component</p>
  
  <pre><code>  public thisIstheDataForThisComponent= { count: 0, data: [] };
  
      let myHttpOptions= {
        headers: new HttpHeaders({
          'HTTP_TOKEN': 'ASDF2SOMERANDOMTOKENHERE'
        })
      };
  
    this.myCustomService.getData('/apiController/getData', myHttpOptions).subscribe((data) =&gt; {
  
      if (data != '') {
        for (var i = 0; i &lt; data.data.length; i++) {
          this.thisIstheDataForThisComponent.data.push({  
              country: data.data[i].country,
              total: data.data[i].total,
              numstuff: data.data[i].numstuff,
              blahstuff: data.data[i].blahstuff,
              thisstuff: data.data[i].thisstuff,
              thatstuff: data.data[i].thatstuff
            });
          }   
          this.thisIstheDataForThisComponent.count = data.data.length;   
        }
  
    });
        this.thisIstheDataForThisComponent.data = this.thisIstheDataForThisComponent.data;
        this.thisIstheDataForThisComponent.count = this.thisIstheDataForThisComponent.count;
  </code></pre>
  
  <p>then here is the <strong>parent</strong> component template</p>
  
  <pre><code>                &lt;article class="col-sm12"&gt;
                    &lt;my-widget [thisIstheDataForThisComponent]='thisIstheDataForThisComponent'&gt;&lt;/my-widget&gt;
                  &lt;/article&gt;
  </code></pre>
  
  <p>here is the <strong>child</strong> component</p>
  
  <pre><code>  @Input()thisIstheDataForThisComponent: any;
  </code></pre>
  
  <p>then in the <strong>child</strong> component template</p>
  
  <pre><code> &lt;tr *ngFor="let items of thisIstheDataForThisComponent.data"&gt;&lt;!--START TR--&gt;
  </code></pre>