Question

我有简单的代码，其中我从Typescript中的数据数组中显示HTML模板中的输入值。我遇到了一个问题，即数据加载速度不够快，直到加载数据时我都遇到了错误。我通过检查endTime或StartTime是否为空来解决此问题。在尝试解决问题时，我注意到我的console.log打印多次。我希望此功能可以运行一次。 为什么它多次运行？难道我做错了什么？还是应该以这种角度工作？

要提供更多信息，这是HTML代码。

我有多个具有2个输入值的卡，它们调用了我的函数returnTime（）

<mat-card *ngFor="let item of requestVehicles.controls; let pointIndex=index" [formGroupName]="pointIndex">

该函数的调用方式如下

<input [value]="returnTime(pointIndex, true)">

实际功能

  returnTime(pointIndex, isEnd) {
    if (this.data.isEdit) {
      console.log('ENDTIME =======' + this.endTime + '          STARTTIME =========' + this.startTime);
      // rest of the logic that should not be relevant.
    } else {
      return '';
    }
  }

pointIndex的最大值通常为2-3。因此不应解释控制台日志的数量。

Answer 1

在我的评论之后：

您想要一个同时处理日期和时间的日期选择器。因此，您将创建两个都绑定到单个表单控件/ ngModel的输入。

这是一个糟糕的设计：Angualr没有考虑到这种可能性。

您应该创建实现ControlValueAccessor的新的自定义表单控件，而不是这样做。

您可以在这里找到文档：https://angular.io/api/forms/ControlValueAccessor

可以在网上找到一些教程，例如：

为什么Angular输入[value] =“ function（）”多次运行？

1 个答案: