Question

尝试在活动中使用按钮。由于某种原因，我无法追踪，它会在事件呈现后立即执行。

initCalendar() {
  function onInteract (id) {
    console.log(id);   // <----- Executes once everything is rendered (not good)
  }
  this.calendarOptions = {
    ...,
    ...,
    eventRender: function(event, element) {
      ...
      ...
      listedUsers.forEach(function(a) {
        const member = teamMembers.filter((o) => o.member._id === a.employeeMetadata.name)[0].member;
        event.description = '' +
          '<div class="text-center">' +
          '<button mat-button style="width: 80%;' +
          '    color: black;\n' +
          '    background-color: lightskyblue;\n' +
          '    font-weight: bold;" (click)="' + onInteract(member) + '">' +
          member.firstName + ' ' + member.lastName +
          '</button>' +
          '</div>';
        element.find('.fc-bg').append('<br>' + event.description)
      })
    }
  }
}

我只需要在单击有问题的按钮时执行该功能

协助？

修改

这就是原始设置（上面代码）的样子：

这是我使用新设置的代码（遵循ngzone方法）

listedUsers.forEach(function(a) {
  const member = teamMembers.filter((o) => o.member._id === a.employeeMetadata.name)[0].member;
  event.description = element.find('.fc-bg button[mat-button]').click(() => onInteract(member));
  element.find('.fc-bg').append('<br>' + event.description)
})

现在按钮不会显示在事件上。虽然我没有实现ngZone（这对我来说是新的）。它与它有什么关系吗？我在这里走在正确的轨道上吗？

编辑2

listedUsers.forEach(function(a) {
  const member = teamMembers.filter((o) => o.member._id === a.employeeMetadata.name)[0].member;
  event.description = element.find('.fc-bg')
  .append('<br><div style="text-align: center">' +
  '<button mat-button style="width: 80%;' +
  'color: black;' +
  'background-color: lightskyblue;' +
  'font-weight: bold;">' + member.firstName +  ' + ' + member.lastName +
  '</button></div>').click(() => onInteract(member));
  element.find('.fc-bg').append(event.description)
})

现在按钮不会在启动时执行，但在点击时，但它并不是按钮执行，而是整个元素。当我尝试单击按钮时，它实际上会单击元素本身并与其所有“按钮”进行交互。意味着我在最左边的元素上获得3次交互，在最右边获得1次交互。

我还是不明白:) 但是，我也不明白如何使按钮位于元素上方。我尝试position:relative和z-index到999999999

Answer 1

它按预期工作。此

'    font-weight: bold;" (click)="' + onInteract(member) + '">'

执行onInteract函数，因为它正在被调用。

此外，(click)不能在这里使用，因为这段HTML代码不是由Angular编译器编译的。

应手动设置Click事件处理程序，例如：

element.find('.fc-bg button[mat-button]').click(() => onInteract(member))

请注意，由于回调在区域外运行，因此需要ngZone.run(...)才能与Angular组件的其余部分集成。

Answer 2

现在已经解决了

@estus和this线程有很大帮助，谢谢

eventRender功能变成了这个：

listedUsers.forEach(function(a) {
  const member = teamMembers.filter((o) => o.member._id === a.employeeMetadata.name)[0].member;
  element.find('.fc-bg')
  .append('<br><div style="text-align: center">' +
  '<button mat-button style="width: 80%;' +
  'color: black;' +
  'background-color: lightskyblue;' +
  'font-weight: bold;" id="' + member._id + '">' + member.firstName + ' ' + member.lastName +
  '</button></div>');
})

并添加了eventClick功能：

const listedUsers = assigned.filter(function(o) {
  return this.indexOf(o.employeeMetadata.name) > -1;
  }, teamMembers.map((o) => o.member._id));
  listedUsers.forEach(function(a) {
  const member = teamMembers.filter((o) => o.member._id === a.employeeMetadata.name)[0].member;
  if (jsEvent.target.id === member._id) {
    onInteract(member)
  }
})

现在一切都很好

再次感谢你！

fullcalendar添加按钮到事件打字稿角度

2 个答案: