升级Angular 6与RxJS 6后遇Observable无'do'属性编译错误求助

嘿，这个问题我太熟了！RxJS 6 对操作符的使用方式做了重大改动，原来的do操作符不仅换了名字，连导入和调用逻辑都变了，这就是你触发编译错误的核心原因。

核心问题拆解 #

• RxJS 6 彻底移除了基于原型链的操作符导入（也就是你之前用的import 'rxjs/add/operator/do'这种写法），强制改用pipeable操作符
• 为了避免和JavaScript原生的do关键字冲突，原来的do操作符直接改名为tap

具体修复步骤 #

1. 更新导入语句 #

删掉所有旧的原型链导入，换成从rxjs/operators导入新的pipeable操作符，同时更新Observable相关的工具方法：

// 替换旧的导入
import { Observable, of, throwError } from 'rxjs'; // throw 改为 throwError
import { tap, catchError } from 'rxjs/operators'; // do 改为 tap，catch 改为 catchError

2. 改用pipe链式调用 #

RxJS 6 要求所有操作符必须通过.pipe()方法串联，不能再直接在Observable实例后链式调用操作符了。

修改后的完整代码示例 #

import { Observable, of, throwError } from 'rxjs';
import { tap, catchError } from 'rxjs/operators';
import { IProduct } from './product';

@Injectable()
export class ProductService {
  constructor(private product: IProduct) { }

  getProduct = () => {
    // 注意：数组不是Observable，需要用of()包装成Observable
    return of(this.product.products)
      .pipe(
        // 原来的do()替换为tap()
        tap(data => console.log('产品数据已获取:', data)),
        // 原来的catch()替换为catchError()
        catchError(error => {
          console.error('获取产品数据失败:', error);
          return throwError(() => new Error('加载产品列表出错'));
        })
      );
  };
}

额外小贴士 #

• 除了do→tap，还有不少操作符都改了名：比如catch→catchError、throw→throwError、finally→finalize
• 如果你的项目有大量旧代码暂时不想全量修改，可以临时安装rxjs-compat包兼容旧写法，但长远来看建议逐步迁移到RxJS 6的标准写法，避免后续版本兼容问题

内容的提问来源于stack exchange，提问作者Urgen