角度模板插值答案

【问题标题】：Angular template interpolation角度模板插值
【发布时间】：2021-04-26 13:19:41
【问题描述】：

Angular 版本 11

我有一个模板，它使用 typescript 文件的方法返回当前日期时间。

问题是，如果在模板的插值中我调用这个方法，我第一次渲染页面时，它可以正常工作，但是 1 分钟后，值应该会更改为下一分钟......它确实不是……

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

模板：

<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 '';
}

【问题讨论】：

类似这样的：stackblitz.com/edit/… ?
这可以工作。但是，如果组件的内容发生变化，则 angular 应该呈现组件（直接在插值中使用方法，而不是属性）
"angular 应该在组件的内容发生变化时渲染组件" 你是什么意思？内容变化在哪里？
请参阅我在下面的答案中添加的评论:)
我还是不明白你是怎么调用这个方法的。您是说“如果您在两分钟内调用它”，但您是如何调用该方法的？

标签： javascript angular typescript date format

【解决方案1】：

你可以这样做：

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

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

插值time

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

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

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

【讨论】：

它是一种您可以在我的问题中看到的方法....如果您现在调用此方法，它将回答：2021 年 4 月 26 日下午 3:27.... 但如果您调用此方法2 分钟内的方法，将在 2021 年 4 月 26 日下午 3:27 回答这个问题所以从技术上讲，这个方法没有任何改变，它会自行改变
好的，更新问题，请稍候
您不能像@eko 所说的那样再次调用该函数。一个函数只运行一次，如果不反复运行就不能说内容是否不同，这不是一件好事
我在这里所做的是强制javascript一次又一次地运行它，它每60秒更新一次时间

【解决方案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 函数，它可能会给您带来问题。可观察的解决方案和管理订阅不会出现该问题。

【讨论】：