Rxjs如何过滤postponds http调用，直到符合以下代码中的条件？

import { from } from 'rxjs';
import { filter, takeWhile } from 'rxjs/operators';

const data = [
  { id: 1, name: 'Post 1' },
  { id: 2, name: 'Post 2' },
  { id: 3, name: 'Post 3' },
  // ...
];

// 模拟异步的HTTP调用
function httpCall(post: any) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(post);
    }, 1000);
  });
}

// 创建一个Observable来发出data数组中的每个元素
const observable$ = from(data);

// 过滤和条件判断
observable$
  .pipe(
    // 过滤条件：id大于等于2
    filter(post => post.id >= 2),

    // 仅保留满足条件的前两个元素
    takeWhile((post, index) => index < 2)
  )
  .subscribe(post => {
    // 执行HTTP调用并处理结果
    httpCall(post).then(response => {
      console.log(response);
    });
  });