Angular 6中，ng lint combineLatest已经被弃用。

Question

我最近从Angular 5更新到Angular 6。

我收到了这个警告：combineLatest已弃用：不再支持resultSelector，请使用pipe到map。 Rxjs版本为6.1.0，tslint为5.10.0，Angular CLI为6.0.0，Typescript 2.7.2。我像这样使用它：

const a$ = combineLatest(
  this.aStore.select(b.getAuth),
  this.cStore.select(b.getUrl),
  (auth, url) => ({auth, url}),
);

我也尝试过这样做：

empty().pipe(
combineLatest(...),
  ...
)

但这给了我一个提示：combineLatest已被废弃：建议改用静态的combineLatest，同时empty也被废弃了，建议使用其静态版本。

- Phaze

---

你可以尝试使用以下代码进行编程: a$.pipe(a$ => combineLatest(a$,b$, c$)); 并且需要导入 "rxjs" 中的 { combineLatest }。 - Twen

Answer 1

combineLatest已被弃用：不再支持resultSelector，请使用管道操作符map代替

上面的警告建议您删除combineLatest可观测对象中提供的最后一个函数resultSelector，并将其作为map操作符的一部分提供，如下所示

const a$ = combineLatest(
  this.aStore.select(b.getAuth),
  this.cStore.select(b.getUrl)
);

const result$ = a$.pipe(
  map(results => ({auth: results[0], url: results[1]}))
)

更新：

如果您看到 combineLatest已过时：请将参数放在单个数组中传递，那么只需要添加 [] 即可：

const a$ = combineLatest([
  this.aStore.select(b.getAuth),
  this.cStore.select(b.getUrl)
]);
    
const result$ = a$.pipe(
  map(results => ({auth: results[0], url: results[1]}))
)

- Abinesh Devadas

---

谢谢！这个方法可行，但是combineLatest会生成一个数组，所以我必须这样做： const result$ = a$.pipe(map((a) => ({auth: a['0'], url: a['1']}))); - Phaze

个人偏好而已，但我更喜欢在这里使用解构赋值，而不是映射到一个新对象。就像这样：const result$ = a$.pipe(tap(([auth, url]) => { /* ... */ })); - ZackDeRose

如果我想使用像旧的combineLatest()中的投影仪功能，我该怎么做？ - Dev Yego

更新 https://dev59.com/7lcP5IYBdhLWcg3wr74G#67792658。 - BorisD

Answer 2

如果您从操作符中导入combineLatest，那么很遗憾您可能也会遇到tslint错误：

import { combineLatest } from 'rxjs/operators';
    
combineLatest(...array);

取代,

import { combineLatest } from 'rxjs';
    
combineLatest(...array);

- Rui Marques

Answer 3

与旧版本不同，combineLatest 现在接受一个 数组 的 Observable 并返回包含每个最新值的数组。必须让每个流都产生值才能使 combineLatest 产生值。

fruitType$ = combineLatest([this.entity$, this.datasetStateService.get$('Fruits')])
  .pipe(map(data => {
    const entity = data[0];
    const dataset = data[1];
    return {
       isApple: (dataset.find(ds => ds.label === 'Apple') as DataItem).id === entity.fruitId,
       isOrange: (dataset.find(ds => ds.label === 'Orange') as DataItem).id === entity.fruitId
    }
}));

- jenson-button-event

Answer 4

在我的情况下，是因为我明确设置了泛型参数，所以选择了错误的combineLatest重载。为了消除警告，我已经做出了改变。

combineLatest<void>([
    firstObservable$,
    secondObservable$
]);

to

combineLatest([
    firstObservable$,
    secondObservable$
]).pipe(
    mapTo(undefined)
);

- Valeriy Katkov

Answer 5

对于“尾逗号”错误，请在 (auth, url) => ({auth, url}) 后面删除逗号。

const a$ = combineLatest(
  this.aStore.select(b.getAuth),
  this.cStore.select(b.getUrl),
  (auth, url) => ({auth, url}),  // Remove this comma.
);

对于“缺少导入”错误，请确保在文件中导入了所有外部变量或类。

例如，在这种情况下，如果您没有导入“combineLatest”，那么请导入它。

import { combineLatest } from 'rxjs'; // For RxJS 6.x

import { combineLatest } from 'rxjs/operators'; // For RxJS 5.x

- Basavaraj Bhusani

---

感谢您，但我觉得我没有表达清楚。那些不是真正的问题，我只是举了一个例子来说明问题，即问题被报告了两次。我已经编辑了我的问题。 - Phaze

Answer 6

我使用了已弃用的combineLatest来结合这两个可观察对象：this.route.paramMap + this.route.queryParamMap：

combineLatest(this.route.paramMap, this.route.queryParamMap)
  .subscribe(combined => {
    const idFollower = combined[0].get('id');
    const page = combined[1].get('page');
  })

- samivic

Answer 7

这个错误也可能是由于传递了一个 Subscription 数组项，而不是实际的可观察对象引起的，哈哈。 （我在这个问题上真的很草率。）

错了！

const foo = Foo$.subscribe(f => {
  // do something with f here
})

const bar = Bar$.subscribe(b => {
  // do something with b here
})

combineLatest([foo, bar]).subscribe(([f, b]) => {
  // do something after both foo$ and bar$ have emitted something
})

正确！

const foo$ = Foo$.pipe(
  tap(f => {
    // do something with f here
  })
)

const bar$ = Bar$.pipe(
  tap(b => {
    // do something with b here
  })
)

combineLatest([foo$, bar$]).subscribe(([f, b]) => {
  // do something after both Foo$ and Bar$ have emitted something
})

- Trevor

Answer 8

我会这样解决：

auth$ = this.aStore.select(b.getAuth);
url$ = this.cStore.select(b.getUrl);

combinedResult$ = combineLatest([this.auth$, this.url$]).pipe(
    map(([auth, url]) => ({auth, url}))
)

- Prezes