angular - 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>

这只会在 delayedData$ 发出值时呈现 hello 组件。

Angular docs on ngIf