Olá Estava lendo sobre NgRx e me deparei com isso:
<div>Current Count: {{ count$ | async }}</div>
O que esse "|" quer dizer?
Isto |
se chama PIPE (https://angular.io/guide/pipes), ele basicamente pega o input e "transforma" na saída desejada, no seu você está usando o chamado "AsyncPipe
impuro", que basicamente é o pipe que aceita Promise
s e Observable
s, ou seja ele passa o valor retornado por um destes diretamente ao teu "elemento"
Você poderia até mesmo retornar um array via Promise ou Observable que ele iria pegar o valor e então sim "popular" no template, algo como:
*ngFor="let item of dados | async"
Em um Observable ele continua observando e entregando esses valores a medida que eles vão chegando, um exemplo da propria documentação:
import { Component } from '@angular/core';
import { Observable, interval } from 'rxjs';
import { map, take } from 'rxjs/operators';
@Component({
selector: 'app-hero-message',
template: `
<h2>Async Hero Message and AsyncPipe</h2>
<p>Message: {{ message$ | async }}</p>
<button (click)="resend()">Resend</button>`,
})
export class HeroAsyncMessageComponent {
message$: Observable<string>;
private messages = [
'You are my hero!',
'You are the best hero!',
'Will you be my hero?'
];
constructor() { this.resend(); }
resend() {
this.message$ = interval(500).pipe(
map(i => this.messages[i]),
take(this.messages.length)
);
}
}
Note que o meio segundo (500ms) é para você notar a troca entre cada item, basicamente ele vai exibindo um de cada vez por causa do interval(500)
, seria interessante para um sistema de "status".
Para ficar mais fácil de entender criei um exemplo que você pode testar online:
pipe
.