使用 ng-fullcalendar dayClick 时的数据绑定

Posted 2023-02-24

【中文标题】使用 ng-fullcalendar dayClick 时的数据绑定

【英文标题】：data bindings when using ng-fullcalendar dayClick

【发布时间】：2018-08-06 12:22:45

【问题描述】：

尝试在 Angular 中构建计划设置工具。我已经实现了 ng-fullcalendar 并根据需要显示。当您单击某一天时，它应该会显示一个包含要填写的简单表单的 div。

我得到了 dayClick 和它的日期就好了，但是当我尝试在 2 路绑定或任何其他 2 路绑定中使用它时，真的什么都没有发生。很确定这是与此相关的范围问题，但我就是想不通。有点新的角度仍然。

不管怎样，这里的代码稍微简化了一点。 html：

<div *ngIf="scheduleCalendarOptions" class="calendarwraper">
  <ng-fullcalendar #scheduleCalendar [options]="scheduleCalendarOptions"></ng-fullcalendar>
</div>
<div *ngIf="showScheduleModal === true" style="width: 450px; background-color: #ffffff; height: 500px; border: 1px solid #cccccc; position: absolute; top: 120px; z-index: 10; left: 50%; margin-left: -225px; ">
  <p>dayClickDate</p>
</div>

.ts

export class BoardComponent implements OnInit 
  showScheduleModal: boolean = false;
  dayClickDate: any = 'test';

  this.scheduleCalendarOptions = 
    dayClick: (date, jsEvent, view) => this.clickDay(date, jsEvent, view),
  ;

  clickDay(date, jsEvent, view) 
    const clickedDate = new Date(date).toLocaleString('en-US', timeZone: 'UTC').split(', ');
    console.log(clickedDate[0]);
    this.showScheduleModal = true;
    this.dayClickDate = clickedDate;
    console.log('this.dayClickDate: ', this.dayClickDate);
  

日历显示正常。 dayClick 甚至触发并进入 clickDay 方法。 console.log(clickedDate[0]) 工作得很好。但是 showScheduleModal 和 dayClickDate 没有更新。如果我手动显示隐藏的 div，则日期永远不会更新。我猜问题是 this.showScheduleModal 中的 this 并且可能与箭头函数有关？任何建议将不胜感激！谢谢。

更新...我在 clickDay 方法的末尾添加了另一个 console.log，它输出了我期望的存储日期。但是查看 dayClickDate 的 html 模板没有更新，即使变量清楚地保存了正确的值。好困惑。

【参考方案1】：

您可能希望将 if 语句更改为

*ngIf="showScheduleModal === true"

或者只是

*ngIf="showScheduleModal"

不太确定这是否是您的确切问题，但可能是前进的一步。您可以在 typescript here 中阅读有关等于和布尔值的更多信息。

【讨论】：

感谢 Lars 的建议……这可能是问题的一部分。一直忘记确保检查类型和值。虽然这似乎并没有解决让 showScheduleModal 的价值为真的问题，但这可能会成为一个问题，所以谢谢。

所以if语句应该返回true，但是字符串插值不起作用？

所以我把它去掉了，忽略了日期，只关注 showScheduleModal。好的，所以如果我在默认情况下将导出中的初始声明设为 true，则弹出窗口会立即显示在页面渲染上。但是，如果将 绑定到 dayclick 事件，控制台日志会立即触发，显示它已更改为 true。有时弹出窗口会在 20 或 30 秒后出现。大多数情况下，它根本不会出现。尽管价值是真实的。这真的让我很奇怪。

这有点奇怪。您使用 *ngIf 来显示模态是否有特定原因？您可能想改用一些引导模式及其服务。你可以阅读他们here

主要是因为我正在向由第 3 方程序员构建的大型入职向导添加功能，并试图与已经存在的内容保持一致。我不反对使用引导模式，但这会导致这种行为吗？将显示/隐藏 div 与 ngIf 与模态一起使用？