Angular中为带async管道的*ngIf语句添加多条件的方法及管道运算符名称查询

Let's break this down into two clear parts to address both your questions:

1. What's the Official Name of the | Operator in Angular? #

That vertical bar isn't an "or operator" (that's || in JavaScript/TypeScript) — in Angular template syntax, it's officially called the pipe operator. It’s used to apply Angular pipes (like the async pipe you’re using) to transform values directly in templates. Searching for "Angular pipe operator" will lead you straight to the official documentation you were looking for.

2. Correctly Adding Extra Conditions to *ngIf with Async Pipe #

Your two attempts failed due to operator precedence and Angular's template binding syntax rules. Here are the clean, error-free ways to add your extra condition:

Option 1: Combine Conditions Directly in the Template (Simple Cases) #

Use parentheses to ensure the async pipe resolves first, then add your extra condition with a logical operator. Or use the comma-separated syntax (Angular 12+) which makes the assignment and condition much more readable:

<!-- Using parentheses to enforce correct operator precedence -->
<div *ngIf="(data$ | async) as data && !isLoading; else loading"></div>

<!-- Using comma-separated syntax (recommended for clarity) -->
<div *ngIf="data$ | async as data, !isLoading; else loading"></div>

Note: If isLoading is also an Observable, you’ll need to pipe it with async too:

<div *ngIf="data$ | async as data, !(isLoading$ | async); else loading"></div>

Option 2: Combine Observables in the Component (Cleaner for Complex Logic) #

If your conditions grow more complicated, it’s better to create a combined Observable in your component class. This keeps your template uncluttered and easier to maintain:

// Inside your component.ts file
import { combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

// Assume data$ and isLoading$ are your existing Observables
combinedState$ = combineLatest([this.data$, this.isLoading$]).pipe(
  map(([data, isLoading]) => ({ data, isLoading }))
);

Then in your template:

<div *ngIf="combinedState$ | async as state; else loading">
  <!-- Access your data with state.data, check loading state with state.isLoading -->
</div>

This approach is especially useful if you need to reuse this combined state elsewhere in your component.

内容的提问来源于stack exchange，提问作者logger