Question

我有带模式窗口的日历，允许在日历的任何一天添加事件。我已经在控制台中显示了这些书面数据，但是我无法将其绑定以将书面数据保存到日历单元格中

这是我的代码https://stackblitz.com/edit/angular-nxczn8

通过单击“保存事件”按钮数据应在日历单元格中支付。我该怎么做到？

Answer 1

我解决了你的问题。如果需要在月份更改时显示事件，则需要将其存储在服务或组件中。您也可以检查已编辑的StackBiltz

您的app.component.ts上的

weeks: Array<Array<{date: Date, hasEvent: boolean, eventTitle: string}>>;

  getEvents() {
    this.calendar.setDate(this.date);
    console.log(this.calendar.getWeeks());
    this.weeks = this.calendar.getWeeks().map(x => { return x.map(y => { return {date: y, hasEvent: false, eventTitle: ""} }) });
    const from = this.calendar.getFrom();
    const to = this.calendar.getTo();
  }

  openModalContent(weekIdx, day) {
    const  modalRef = this.modalService.open(ModalContentComponent);
    modalRef.result.then((result) => {
      day.hasEvent = true;
      day.eventTitle = result;
      console.log("result -> ", result);
    }).catch((error) => {
      console.error(error);
    });
  }

在您的app.component.html

<tbody>
<tr *ngFor="let week of weeks; let weekIdx = index">
  <td *ngFor="let day of week" class="day-of-month" [ngClass] = "{'bg-primary': day.hasEvent}">
    <div class="events">
      <span class="day-number">{{ day.date | date:'d' }}</span>
      <button (click)="openModalContent(weekIdx, day)" class="btn-add">Add event</button>
    </div>
  </td>
</tr>
</tbody>

将数据从一个组件保存到另一组件

1 个答案: