いずみこんな悩みを解決できる記事を書きました！
僕は現役フリーランスエンジニア（歴9年）で、資格は13個保有しています。
「「Async pipes should not be negated.」を解消したい」とお考えではありませんか？
結論から言うと、「Async pipes should not be negated.」はEslintのワーニングで修正は超簡単です。
いずみ内容がマニアックすぎる…
本記事を読めば、「Async pipes should not be negated.の解消法」について分かるので早速見ていきましょう！
いずみすぐ読み終わるので、ぜひ最後まで読んでくださいませ。
「Async pipes should not be negated.」とは
「Async pipes should not be negated.」は、asyncパイプで判定する際に「構文変やから修正した方がええで」というエラー（というかワーニング）です。
Eslintを導入していると以下のようなワーニングが出ます。
error Async pipes should not be negated. Use (observable | async) === (false | null | undefined) to check its value instead @angular-eslint/template/no-negated-async「Async pipes should not be negated.」の原因
僕はダッシュボードを作っている際に遭遇しました。
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item [routerLink]="['/']">Top</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>schematics-sample</span>
</mat-toolbar>
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>上記のようなコードがあるとして、
[opened]="!(isHandset$ | async)">↑でワーニングになります。
「Async pipes should not be negated.」の解消方法
[opened]="(isHandset$ | async) !== true"上記みたいに書き換えればOK。
いずみ超簡単だったけど、あんまり情報なかったから時間かかったぜ…
まとめ
今回は、「Async pipes should not be negated.」の解消方法について解説しました。
以下が本記事のまとめになります。
- おすすめ本
Angularの勉強なら「Angularアプリケーションプログラミング
」が分かりやすくておすすめですよ♪
いずみ最後までお読みいただき、ありがとうございました！
- クソおすすめ本
いずみ海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。
