如何在模板 Angular 2 中呈现 observables 数组长度

Posted 2023-03-13

【中文标题】如何在模板 Angular 2 中呈现 observables 数组长度

【英文标题】：How to render an observables arrays length in template Angular 2

【发布时间】：2017-11-19 07:18:22

【问题描述】：

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

---template-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

【参考方案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）

【讨论】：

你做到了！你绝对的传奇！整天都在尝试！

【参考方案2】：

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

这是一种方法：使用.do 将挂钩添加到能够访问数据的可观察对象。

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; 
    );

【讨论】：

感谢您的回复，但除非我将代码从 (cases.map(case => case.length) 更改为 (cases.map(cases => cases.长度）。然后我只有一个错误，说“ICase”类型上不存在属性“长度”

对不起 - 我的意思是 cases => 并误解了你的例子。让我调整一下我的帖子。

一切似乎工作正常，但我在控制台窗口中出现错误，错误类型错误：error.json is not a function at CatchSubscriber.TemplateService.handleError [as selector] (app/template/模板服务.js:39)

这看起来像是一个单独的问题。您的handleError 可能期望响应来自_http，因此编辑该函数以打印error 而不是error.json。

仅供参考 - 私有属性中角度 recommends against underscores 的样式指南。