NG Pipe

ts文件中使用管道

new TimeFormatPipe().transform('2021-11-04T11:34:51','YY-MM-DD hh:mm:ss')

大小写转换

<p>{{str | uppercase}}</p>//转换成大写
<p>{{str | lowercase}}</p>//转换成小写

日期格式转换

<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>

小数位数

接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}

<p>{{p | number:'1.2-4'}}</p> // 保留2~4位小数

JavaScript 对象序列化

<p>{{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name": "semlinker" } -->

slice

<p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem -->

管道链

<p>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <!-- Output: SEM -->

async

async 管道会订阅一个 Observable 或 Promise，并返回它发出的最近一个值。 当新值到来时，async 管道就会把该组件标记为需要进行变更检测。当组件被销毁时，async 管道就会自动取消订阅，以消除潜在的内存泄露问题;

输入值：

Observable<T> | Subscribable<T> | Promise<T>

<h3>Shipping Prices</h3>

<div class="shipping-item" *ngFor="let shipping of shippingCosts | async">
  <span>{{ shipping.type }}</span>
  <span>{{ shipping.price | currency }}</span>
</div>

@Component({
  selector: 'async-promise-pipe',
  template: `<div>
    <code>promise|async</code>:
    <button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button>
    <span>Wait for it... {{ greeting | async }}</span>
  </div>`
})
export class AsyncPromisePipeComponent {
  greeting: Promise<string>|null = null;
  arrived: boolean = false;

  private resolve: Function|null = null;

  constructor() {
    this.reset();
  }

  reset() {
    this.arrived = false;
    this.greeting = new Promise<string>((resolve, reject) => {
      this.resolve = resolve;
    });
  }

  clicked() {
    if (this.arrived) {
      this.reset();
    } else {
      this.resolve!('hi there!');
      this.arrived = true;
    }
  }
}

@Component({
  selector: 'async-observable-pipe',
  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
})
export class AsyncObservablePipeComponent {
  time = new Observable<string>((observer: Observer<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.https://serious-lose.notion.site/NG-Pipe-9c823eed81594be297c98d8c9e75d0e4