Angular: 使用带格式的管道日期

Question

我有一个电梯组件。每当电梯到达一楼时，存储日期并以dd/MM/yy格式显示。

if floor === 1 show Date
else
return(empty)

我尝试运行的函数是 GetDate

我的 stackblitz：https://stackblitz.com/edit/angular-ivy-zbrapb?file=src%2Fapp%2Fapp.component.ts

Answer 1

import { Component, OnInit } from '@angular/core';
import { interval, Observable, map, tap } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  floor$!: Observable<Number>;
  myDate: Date;

  ngOnInit(): void {
    this.floor$ = this.getNumbersInfinite();
  }

  getNumbersInfinite() {
    return interval(1000).pipe(
      map(() => Math.floor(Math.random() * 3) + 1),
      tap(() => (this.myDate = new Date()))
    );
  }
}

<div *ngIf="floor$ | async as floor">
  {{ floor | replaceWordLoby }}
  <div *ngIf="floor == 1">
    {{ myDate | date: 'dd/MM/yy' }}
  </div>
</div>

Answer 2

您尝试从 Observable 中获取数字。这是行不通的。我添加了一个新的 var 和一个用于副作用的 tap。那可行。还有其他方法可以实现这一目标；创建一个 Subject 将根据楼层号接收 next(true/false) 并使用 ngIF 显示日期。

export class AppComponent implements OnInit {
  floor!: Observable<Number>;
  floorNumber: number = -1;
  myDate = new Date();

  ngOnInit(): void {
    this.floor = this.getNumbersInfinite();
  }

  getNumbersInfinite() {
    return interval(1000)
    .pipe(
      map(() => Math.floor(Math.random() * 3) + 1),
      tap(res =>this.floorNumber=res));
  }

  GetDate() {
    if (Number(this.floorNumber) === 1) {
      return true;
    }
    return false;
  }
}

Angular: 使用带格式的管道日期

Angular: Use Pipe Date with Format

angular