Angular AsynPipe生成null作为第一个值

在Angular中使用异步管道时，如果不立即触发TTP请求或任何可观察到的延迟，则第一个值为null 为什么会这样？如何避免这种情况

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

第二个变化：

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

stackblitz示例：

---

这是预期的行为。要避免这种情况，可以使用*ngIf指令：

这将仅在delayedData$发出值时呈现hello组件

---

这是一个已知的角度错误，在本期中解释为建议，但它是一个错误

本讨论中列出了可能的解决方案。通常，解决方案是使用startWith rxjs运算符，使用？。在模板中

还有一个tslint规则可以防止类似的情况

尝试如下：

<ng-container *ngIf="delayedData$ | async; let item">
  <hello name="Observable emitting with a delay" [data]="item" > </hello>
</ng-container>

---

一个简单的方法是在请求完成之前提供一个默认值

---

你可以简单地使用“startWith”操作符，因为你在你的一个observable中使用，结果实际上是合乎逻辑的，因为observable不包含任何初始值，它打印空值，试试startWith操作符，或者它的变体@Muhammed Albarmavi，我建议使用startWith，我知道您的实际代码中可能有很多复杂的数据结构，但是，您可以传递空数组空对象等。这是一个很好的解决方案，但问题不是仅在数据出现时才渲染元素，但请确保我在输入中得到的是我从后端获得的数据。@KaterinaPavlenko但问题不是仅在数据出现时才渲染元素？我不理解这种说法。您能澄清一下您的意思吗？您的解决方案允许我仅在delayedData$生成非空值时渲染组件。这很好，但如果delayedData$可以生成空值，并且这是它的正常行为，该怎么办？我希望呈现的组件不依赖于delayedData$？长话短说–我希望在ngOnChanges中使用@Input data并将默认null与实际null分开。从管道的实现来看，这不是预期的行为吗？您可以简单地使用“startWith”操作符，当你在一个observable中使用时，结果实际上是合乎逻辑的，因为observable不包含任何初始值，它打印空值，尝试运算符startWith，或者它的变体@Muhammed Albarmavi在这里写道，我建议使用startWith，我知道在你的真实代码中可能有很多复杂的数据结构，但是，你可以传递空数组空对象等。如果你深入到实现中——你可以预期，但在正式的dos中没有，而且这是一种非常奇怪的行为——我只期望我的可观察值，没有副作用。这可能也是解决方案，但它的行为与startwith运算符完全相同，但从Operator开始是实现同样目标的更干净的方法result@LashaSumbadze是的，这只是一种替代方法，但我认为所有答案都可以很好地工作这是一个好主意，但这个答案的解决方案更短，做同样的事，我打算添加这个作为另一个选项，但因为我看到有人已经添加了它，我没有提到：aggred the startWith是正确的答案，而其他答案只是一个自吹自擂的作品

<ng-container *ngIf="delayedData$ | async; let item">
  <hello name="Observable emitting with a delay" [data]="item" > </hello>
</ng-container>