[英]Async pipes should not be negated
I migrated from TSLint to ESLint following the guide .我按照指南从 TSLint 迁移到 ESLint。 Now, I get this error message:
现在,我收到此错误消息:
Async pipes should not be negated.
不应该否定异步管道。 Use (observable | async) === (false | null | undefined) to check its value instead
使用 (observable | async) === (false | null | undefined) 来检查它的值
And here is the given explanation :这是给定的解释:
Angular's async pipes emit null initially, prior to the observable emitting any values, or the promise resolving.
Angular 的异步管道最初发出 null,先于 observable 发出任何值,或 promise 解析。 This can cause negations, like *ngIf=”.(myConditional | async)” to thrash the layout and cause expensive side-effects like firing off XHR requests for a component which should not be shown.
这可能会导致否定,例如 *ngIf=”.(myConditional | async)” 来破坏布局并导致昂贵的副作用,例如触发不应该显示的组件的 XHR 请求。
But I don't understand the proposed solution, particularly the bitwise OR: false | null | undefined
但我不明白建议的解决方案,尤其是按位或:
false | null | undefined
false | null | undefined
false | null | undefined
. false | null | undefined
。 When I try to write (false | null | undefined)
in a template, Angular seems to consider null
and undefined
as pipes (which seems legit) and throws an error message.当我尝试在模板中编写
(false | null | undefined)
时,Angular 似乎将null
和undefined
视为管道(这似乎是合法的)并抛出一条错误消息。 Even outside of an html template, this bitwise OR just returns 0 so, what is the point?即使在 html 模板之外,这个按位或只返回 0 那么,有什么意义呢? I also tried
false || null || undefined
我也试过
false || null || undefined
false || null || undefined
false || null || undefined
but it is actually equivalent to undefined
false || null || undefined
但它实际上等同于undefined
Did I miss something?我错过了什么? Or is the error message misleading?
或者错误信息是否具有误导性? How should I write it then?
那我该怎么写呢?
The best I have is this but it is pretty ugly:我拥有的最好的是这个,但它很丑陋:
(observable | async) === false || (observable | async) === undefined
As another way to compare the values from the observable, you can create your own pipes:作为比较可观察值的另一种方法,您可以创建自己的管道:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'isFalsy',
pure: false,
})
export class IsFalsyPipe implements PipeTransform {
transform(value: any): any {
return value ? false : true;
}
}
Import in your module and then compare it like this:导入您的模块,然后像这样比较它:
<div *ngIf="observable$ | async | isFalsy"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.