角度和 RxJS/switchMap答案

【问题标题】：angular and RxJS/switchMap角度和 RxJS/switchMap
【发布时间】：2019-10-12 20:58:06
【问题描述】：

您好，我是 RxJS 的新手，刚刚开始了解操作符。我想在按钮单击后以一秒的时间间隔在控制台中显示接下来的 6 个数字。我想在下次单击后使用 switchMap 重置该计数器。

我一直在尝试使用 switchMap，但计数器没有重置。

obsSwitchMap: Observable<any>;

this.obsSwitchMap = of(null).pipe(
  switchMap(x => from([1, 2, 3]).pipe(
    concatMap(item => of(item).pipe(delay(300)))
    )
  )  
)

onSwitchMapBtnClick() {
  this.obsSwitchMap.subscribe(x => {
    console.log(x)
  })
}

数字彼此独立显示

【问题讨论】：

标签： rxjs observable

【解决方案1】：

虽然你想学习，但我认为你应该从一开始就学习最佳实践。

这意味着你可以在没有 switchMap 的情况下非常简单地做到这一点：

const newInterval = () => rxjs.timer(0, 1000).pipe(
  rxjs.operators.map(nb => new Array(6).fill(nb).map((v, i) => v + i + 1))
);

let subscription;

function resetTimer() {
  subscription && subscription.unsubscribe();
  subscription = newInterval().subscribe(v => console.log(v));
}

resetTimer();

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js"></script>

<button onclick="resetTimer()">Reset timer</button>

编辑

这是一个 switchMap 示例：

const horsemen = [
  { id: 1, name: 'Death' },
  { id: 2, name: 'Famine' },
  { id: 3, name: 'War' },
  { id: 4, name: 'Conquest' },
];

// Fake HTTP call of 1 second
function getHorseman(id) {
  return rxjs
    .of(horsemen.find(h => h.id === id))
    .pipe(rxjs.operators.delay(1000));
}

const query = document.querySelector('input');
const result = document.querySelector('div.result');

// Listen to input
rxjs.fromEvent(query, 'input')
  .pipe(
    rxjs.operators.map(event => +event.target.value), // Get ID
    rxjs.operators.switchMap(id => getHorseman(id)) // Get Horseman
  ).subscribe(horseman => {
    let content;
    if (horseman) content = `Horseman = ${horseman.name}`;
    else content = `Horseman unknown`;
    result.innerText = content;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js"></script>

<input type="text" placeholder="Input an ID here (1-4)">

<div class="result"></div>

【讨论】：

谢谢，但我一直在寻找示例以了解有关 switchMap 的一些信息。也许我的例子没什么用，但可能有助于理解
试试这个例子：你有一个包含用户 ID 的 observable，你需要获取该用户的名称（存储在另一个 Observable 中，包含一个 { id: number, name: string } 数组。
那么我应该什么时候使用 switchMap？
@szaranczazespizu switchMap 用于将流替换为另一个流，并取消任何先前的订阅。它对于即时研究、自动完成等非常有用。
@szaranczazespizu 当然，我已经编辑了我的帖子。如果您对此有任何疑问，请随时问我。

【解决方案2】：

我找到了使用 switchMap 的简单解决方案。每次点击时，重新启动您的可观察计数器并获取您想要的项目数。

const btn = document.querySelector('button');

fromEvent(btn, 'click').pipe(
    switchMap((item => interval(1000).pipe(take(6)))),
).subscribe(console.log)

【讨论】：