asynsPipe 生成 null 作为第一个值

Question

当在 Angular 中使用异步管道时，不会立即触发事件（http 请求或任何有延迟的可观察值），第一个值null 是为什么会发生？如何避免这种情况？

<hello [data]="delayedData$|async"> </hello>

第一个改变：

SimpleChange {
   currentValue: null
   firstChange: true
   previousValue: undefined
}

第二个变化：

SimpleChange {
   currentValue: 'some real data'
   firstChange: false
   previousValue: null
}

stackblitz 上的示例： https://stackblitz.com/edit/http-async-pipe-crxm32

Answer 1

这是预期的行为。为了避免它，你可以使用*ngIf指令：

<hello *ngIf="delayedData$|async as delayedData" [data]="delayedData"> </hello>

hello仅当delayedData$已发出值时才会渲染组件。

ngIf 上的 Angular 文档