Zenn
🔖

【Angular】Async pipes should not be negated.の解消法

2024/08/06に公開
Angular
TypeScript
frontend
SPA
material
tech

Angular好きなんだけど、シンプルに飽きてきた泉（@izumin_0401）です。

ブログ記事はこちら

https://traveler0401.com/angular-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。

まとめ

eslintは便利なんだけど、たまに「？？」ってなる...

Angularはそもそも情報が少ないですからね...

最後に

暇つぶしにTwitterとブログもやってるので見てね。

Discussion