Question

我目前面临通过Observables订阅数据的问题。直到时间数据被订阅并存储在本地变量（对象数组）中进行显示，同时组件加载并因此不显示数据，因为它仍然从后端获取数据。我假设问题是关于竞争条件（异步），任何关于如何处理这个问题的线索？

我正在阅读Json数据，该数据在＆＃39; ObjectArray＆＃39;中提取值。并在角度2分量上填充与PrimeNG数据表相同的内容。

 <p-dataTable [value]="ObjectArray">
    <p-column field="label"></p-column>
 </p-dataTable>

订阅代码：

  constructor(private store: Store<fromRoot.State>){
    this.metaData$ = store.select(fromRoot.getMetadata);
  }

  this.metaData$.subscribe(
  data => {
    if (data.length > 0) {
      data.forEach(v => this.ObjectArray.push({...v}));
    }
  });

Answer 1

您有三个选项

使用ngIf或使用新的ngIf else和最后一个而不是Router Resolve

假设您要显示的数据是

dataAsync：any;

使用NgIf

<div *ngIf = "dataAsync">
  {{dataAsync}}
</div>

使用new if else显示加载提示

  <ng-template #fetching>
    <p>Fetching...</p>
  </ng-template>

  <div *ngIf=" dataAsync; else fetching;">
    <strong>Angular 4 If else Usage - {{dataAsync}}</strong>
  </div>

路由器解析

查看此解决方案以解决https://plnkr.co/edit/u2qR9J?p=preview

@Injectable()
export class Resolve implements Resolve<any> {

  constructor(private service: yourService) {}

  resolve(route: ActivatedRouteSnapshot) {
    return this.service.getdata();
  }
}

路线

{ 
    path: 'yourpath',
    component: your Component,
    resolve: {
      resolve: Resolve
    }

在组件中使用ngOnInit

ngOnInit() {
    this.resolve= this.route.snapshot.data['resolve'];
  }

然后在模板中显示解析。

请查看我的页面了解所有此类角度概念

https://rahulrsingh09.github.io/AngularConcepts

Answer 2

您有几种选择：

1 - 在等待您的数据时显示加载程序，使用I like chicken<i>eggs</i> but not eggs并在您实际拥有该模板时显示该模板的位。

2 - 使用BehaviourSubject并将其传递给初始占位符值，同时等待真实值。

3 - 在组件的模板中使用异步管道，如下所示：*ngIf

在从Observable订阅数据之前，组件显示空白屏幕

2 个答案: