Question

我有一个可观察到我创建的对象类型＆＃39; ICase＆＃39;。此observable用于使用此方法从JSON文件中检索数据。此方法位于服务文件中。

---模板service.ts ---

 private _caseUrl = 'api/cases.json';
getCases(): Observable<ICase[]> 
    {    
            return this._http.get(this._caseUrl)
            .map((response: Response) => <ICase[]> response.json())
            .do(data => console.log('All: ' + JSON.stringify(data)))
            .catch(this.handleError);     
    }

但是在模板中我想显示我的可观察数组的长度。我已经尝试使用异步管道并使用.length运算符，但我似乎无法在dom中显示它。

---- template.component.ts ----

  ngOnInit(): void
{
    console.log("---In OnInit---");
    this._templateService.getCases()
    .subscribe(cases => this.cases = cases, error=> this.errorMessage = <any>error);
     console.log('Num of cases: ' + this._templateService.getCases().map.length);
      //  this.count =  this._templateService.getCases.length;

}

正如您从我的html中看到的，我可以显示可观察的元素，但我出于机密性原因隐藏了数据。红色圆圈表示我试图显示可观察长度的位置。 Browser Image

Answer 1

您可以做的最好的事情是使用async管道。例如：

// in template.component.ts
  data$:Observable<ICase[]>;
  ngOnInit() {
    this.data$ = this._templateService.getCases();
}

//in template.component.html
<ng-container *ngIf="data$ | async as data">
   {{data.length}}
   <table>
      <tbody>
        <tr *ngFor="let item of data">
            {{item}}
         </tr>
      </tbody>
   </table>
</ng-container>

但请注意，在这种方法中我不考虑错误处理。

（我没有尝试过，但它应该有效：D）

Answer 2

由于您正在使用observable，因此您必须订阅它们才能开始检索任何数据。在您执行此操作之前，只需定义如何处理数据。

这是一种方法：使用.do向可以访问数据的observable添加一个钩子。

ngOnInit(): void {
  this._templateService.getCases()
    .do((cases) => {
      console.log("Number of cases:", cases.length);
    })
    .subscribe(cases => { this.cases = cases; },
               error => { this.errorMessage = error as any; }
    );
}

如何在模板Angular 2中渲染一个observables数组长度

2 个答案: