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。如果在那里，那么您可以从@Component装饰器[从两个组件]中删除changeDetection行之后，请尝试代码。如果有效，那么您需要了解“ OnPush”的工作方式。仅当绑定属性“ REFERENCE”更改时，“ OnPush更改检测”才会运行角度更改检测周期[更多信息，请参见https://blog.angular-university.io/onpush-change-detection-how-it-works/

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

如何修正角度7中的“下面的值刚刚被评估”

2 个答案: