1

当在 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

4

5 回答 5

3

您可以简单地使用“startWith”运算符，就像您在可观察的一个中使用的那样，结果实际上是合乎逻辑的，因为可观察不包含任何初始值，它打印空，尝试运算符 startWith，或者它是@Muhammed Albarmavi 写的变体在这里（我建议使用 startwith），我知道您在现实生活中的代码中可能有很多复杂的数据结构，但是，您也可以传递空数组空对象等

于 2019-12-09T13:10:46.167 回答
3

试试这样：

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

演示

于 2019-12-09T13:03:15.880 回答
3

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

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

这只会在发出值时渲染hello组件。delayedData$

ngIf 上的 Angular 文档

于 2019-12-09T13:00:38.173 回答
1
于 2019-12-09T13:05:05.953 回答
0

这是 Angular 的一个已知错误，在此问题中进行了解释（标记为提案，但它是一个错误） https://github.com/angular/angular/issues/16982

此讨论中列出了可能的解决方案。一般来说，解决方案是使用startWithrxjs 运算符，?.在模板中使用。

还有一个 tslint 规则可以防止像http://codelyzer.com/rules/template-no-negated-async/这样的情况

于 2019-12-09T13:01:52.083 回答