angular - 为什么 Angular 11 异步管道无法通过延迟的 observable 稳定？

Question

我正在通过角度 11 中的异步管道订阅延迟的 observable。

由于某种原因，变化检测（？）不会稳定，管道不会接收到值，我不知道为什么？它没有显示我的数据，而是显示null.

示例：https ://stackblitz.com/edit/angular-async-pipe-with-delay?devtoolsheight=33&file=src/app/app.component.html

html

<h1>{{ getData(0) | async | json }}</h1>

零件

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private dataService: DataService) {}
  getData(id: number) {
    return this.dataService.getDataDelayed(id).pipe(tap(console.log));
  }
}

服务

const data = [
  {
    id: 0,
    data: 'hello'
  }
];

@Injectable()
export class DataService {
  constructor() {}

  getDataDelayed(id: number) {
    return of(data[id]).pipe(delay(5000)); // works fine without the delay
  }
}

Answer 1

在函数调用上使用异步管道时需要小心。异步管道保留对可观察对象的引用并订阅它。当您使用 getData 函数调用时，每次检测到更改时都会创建一个新的 observable，因此异步管道订阅新的 observable 并且不再等待前一个。

您可以做些什么更改 getData 方法以保留对 observable 的引用，以便它始终为给定的 id 返回相同的 observable。

  private data: Observable<any>[] = [];

  getData(id: number) {
    if (!this.data[id]) {
      this.data[id] = this.dataService
        .getDataDelayed(id)
        .pipe(tap(console.log));
    }
    return this.data[id];
  }