如何在角度 7 中修复“刚刚评估过以下值”

Question

我不断在数组旁边看到一个“i”图标

除非我单击分页，否则 ngFor 不会在首次加载时显示项目。那就是它显示整个列表的时间。

是不是因为那个 value below was evaluated just now ，无论如何要在角度 7 中解决这个问题？

我的代码对这个组件所做的是， 1）在主要组件模板我有一个属性绑定 例如[thisIstheDataForThisComponent] = thisIsTheData

2) 然后在此代码的组件中，我循环遍历 thisIstheDataForThisComponent 的内容，因为它在组件中被标记为 @Input 装饰器。

我已经在应用程序的其他部分进行了相同样式的属性绑定，但只有这个数组在第一次加载时没有显示

这是我提取数据的服务代码

  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>

这里是 child 组件

  @Input()thisIstheDataForThisComponent: any;

然后在child组件模板中

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

Answer 1

我会要求你尝试以下 -

1. 看来，在您的父组件或子组件中，您有 changeDetection: ChangeDetectionStrategy.OnPush。如果它在那里，那么您可以在从 @Component 装饰器 [从两个组件] 中删除 changeDetection 行后尝试您的代码。如果它有效，那么您需要了解“OnPush”是如何工作的。 OnPush Change Detection 将仅在绑定属性“REFERENCE”发生变化时运行角度变化检测周期[详情请参阅https://blog.angular-university.io/onpush-change-detection-how-it-works/]

2. 如果 #1 不起作用，请尝试像这样更新代码 -

像这样在你的 observable 中有一个属性 -

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 = []; 初始化一个数组