как исправить "значение ниже было оценено только сейчас" в угловых 7

Question

Я продолжаю получать значок "i" рядом с массивом

ngFor не отображает элементы при первой загрузке, пока я не нажму на нумерацию страниц. тогда это время покажет весь список.

это из-за этого value below was evaluated just now, в любом случае исправить это в угловых 7?

Что мой код делает для этого компонента, так это 1) В шаблоне основного компонента у меня есть привязка свойства например, [thisIstheDataForThisComponent] = thisIsTheData

2) затем в компоненте для этого кода я перебираю содержимое thisIstheDataForThisComponent, поскольку оно помечено как @Input Decorator в компоненте.

Я сделал такой же стиль привязки свойств в других частях приложения, но только этот массив не отображается при первой загрузке

Вот мой Сервис код для извлечения данных

  public getData(url, headers): Observable<any>{
    return this.http.get(config.SERVICE_URL + url, headers)
    .pipe(
      delay(300),
      map((data: any) => (data)),
      catchError(this.handleError)
    )
  }

вот мой код в родительском компоненте

  public thisIstheDataForThisComponent= { count: 0, data: [] };

    let myHttpOptions= {
      headers: new HttpHeaders({
        'HTTP_TOKEN': 'ASDF2SOMERANDOMTOKENHERE'
      })
    };

  this.myCustomService.getData('/apiController/getData', myHttpOptions).subscribe((data) => {

    if (data != '') {
      for (var i = 0; i < 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;

тогда вот родительский шаблон компонента

                <article class="col-sm12">
                  <my-widget [thisIstheDataForThisComponent]='thisIstheDataForThisComponent'></my-widget>
                </article>

вот дочерний компонент

  @Input()thisIstheDataForThisComponent: any;

затем в дочерний шаблон компонента

 <tr *ngFor="let items of thisIstheDataForThisComponent.data"><!--START TR-->

Answer 1

Я бы попросил вас попробовать следующее -

1. Похоже, что в вашем родительском или дочернем компоненте у вас есть changeDetection: ChangeDetectionStrategy.OnPush. Если это так, попробуйте ваш код после удаления строки changeDetection из вашего @Component декоратора [из обоих компонентов]. Если это работает, то вам нужно понять, как работает «OnPush». OnPush Change Detection будет запускать цикл обнаружения угловых изменений только при изменении связанного свойства «ССЫЛКА». ]

2. Если # 1 не работает, попробуйте обновить код следующим образом -

Имейте свойство в вашей наблюдаемой, как это -

public thisIstheDataForThisComponent$: Observable<{ count: 0, data: [] }>;

Теперь в ngOnInit () установите это наблюдаемое свойство, как это -

ngOnInit() {

    let myHttpOptions= {
      headers: new HttpHeaders({
        'HTTP_TOKEN': 'ASDF2SOMERANDOMTOKENHERE'
      })
    };

    this.thisIstheDataForThisComponent$ = this.myCustomService.getData('/apiController/getData', myHttpOptions)
                                              .pipe(
                                                map(data => {
                                                  const retVal = { count: 0, data: [] };
                                                  if(data) {                                                    

                                                    data.data.forEach(d => {
                                                      retVal.data.push(
                                                        {  
                                                          country: d.country,
                                                          total: d.total,
                                                          numstuff: d.numstuff,
                                                          blahstuff: d.blahstuff,
                                                          thisstuff: d.thisstuff,
                                                          thatstuff: dthatstuff
                                                        }
                                                      )
                                                    });

                                                    retVal.count = data.data.length;
                                                  }

                                                  return retVal;
                                                })
                                              );

  }

Теперь в шаблоне родительского компонента сделайте следующее изменение -

<article class="col-sm12">
        <my-widget [thisIstheDataForThisComponent]="thisIstheDataForThisComponent$ | async"></my-widget>
</article>

Обратите внимание на канал async, который автоматически выполняет подписку / отписку.

Надеюсь, что это решение решит вашу проблему или, по крайней мере, даст вам направление для ее решения.

Answer 2

попробуйте инициализировать массив с countries = [];