Question

我有一个可观察的数组，并希望获得该数组中属性值的总和。我的数组定义为：

public bookStores $：Observable;

我打算做一个简单的for循环并计算总和，但是在尝试使用我的数组的count属性时出现语法错误：

Operator '<' cannot be applied to types 'number' and '<T>(this: Observable<T>, predicate?: (value: T, index: number, source: Observable<T>)=>boolean)...

当我这样做时会发生这种情况：

for (let i = 0; i < this.bookStores$.count; i++){ }

我的BookStore对象数组中的每个项都有一个名为numberOfBooks的属性。获取BookStore数组中每个BookStore对象所包含的值的总和的正确方法是什么？

Answer 1

This is why you're getting unexpected results for Observable.count
要获得结果的数组长度，您需要这样做：

BookStoreService.ts

...
getBookStore() : Observable<Bookstore> {
   this.bookstore$ = this.http.get(...)
      .map( (response:Response) =>  response.json() )
      .map( response => response.bookstore);  // optional depends if JSON payload you want is wrapped inside some other container
   return this.bookstore$;
}

Component.ts

  ...
  bookstore$ : Observable<Bookstore>;
  bookstores: Bookstore[];
  numberOfBookStores:number;
  constructor(private bookService:BookService) {}

   ..
  this.bookService.getJobs()
   .subscribe(
     bookstores => {this.bookstores = bookstores;
                    this.numberOfBookstores = this.bookstores.length;
                   },
     err       => { this.bookstores = [] as BookStore[];
                    // Caters for 404 etc error - be sure to be more robust in final code as you may want to indicate types of error back to user. 
                  },
     ()        => {
                  }
   );

<强>更新
如果您只需要遍历HTML模板中的列表，那么然后将bookstores数组定义为属性是没有必要的。我这样做是为了说明如何获得退回的书店集合的大小。

您可以使用以下类型的语法：

<tr *ngFor="let bookstore of (bookstore$ |async) as bookstores; 
            trackBy bookstore?.id; let i = index">
  <td>{{bookstore.numberofBooks}}
<tr/>

您可以找到更多关于：

的信息

*ngFor trackBy, even, odd, first, last here。
在 AS here

此外，还可以查看Lodash和Underscore等图书馆，了解图书数量。我自己没有使用过Underscore。这是一个simple example，可以帮助您入门。

如果您想要更多冒险，请查看此Functional Programming in Javascript Tutorial

从可观察数组中获取属性值的总和

1 个答案: