Angular 模板插值

Question

Angular 版本 11

我有一个模板，它使用 returns 当前日期时间的打字稿文件的方法。

问题是，如果在模板的插值中我调用此方法，我第一次呈现页面时，它工作正常，但 1 分钟后，值应该更改为下一分钟...这它没有....

如果此方法的结果不同，我如何使 angular 刷新模板？

模板：

<span id="date-time">
   {{getCurrentDateTime()}}
</span>

打字稿文件中的方法：

// This method returns the current date-time of a timezone
public getDateTimeForSiteDifferentTimeZone(): string {
    const momentString = moment.tz(this.timeZone).format('DD MMM y, hh:mm A');
    return momentString;
  }
  return '';
}

Answer 1

你可以这样做：

在您的模板中，声明一个变量 time:

export class SomeComponent implements OnInit {
  time = getCurrentDateTime()
...
}

插值time

<span id="date-time">
   {{time}}
</span>

创建一个ngOnInit函数并用setInterval填充它60000ms（1分钟，因为你的时间似乎只显示分钟）。当它触发时，更新 time 变量。

ngOnInit() {
  setInterval(() => {time = getCurrentDateTime()}, 60000)
}

Answer 2

声明控件以管理显示时间的字符串

timeControl = new FormControl(this.getDateTimeForSiteDifferentTimeZone()); // initialize with curren time, if your get error there use it inside ngOnInit

ngOnInit

// remember to delete subscription, I use  @ngneat/until-destroy library
interval(60000).pipe(

            untilDestroyed(this), 
            tap(() => {
                this.timeControl.setValue(this.getDateTimeForSiteDifferentTimeZone());
            })
        ).subscribe();

模板

<span id="date-time">
   {{timeControl.value}}
</span>

我现在不知道如何使用你的函数getCurrentDate()，在这个例子中我直接使用你的函数来使用时刻生成当前日期。

要考虑使用 setInterval 解决方案的更新： 请记住在 ngOnDestroy 组件的方法中使用 clearInterval ，否则我认为即使你退出组件它也会无限期地保持运行，并且如果每次渲染该组件时都生成 setInterval 函数，它可能会给你带来问题。可观察解决方案和管理订阅不会出现该问题。

Angular 模板插值

Angular template interpolation

javascript

format

date

typescript

angular