时间戳

首页 > 解决方案 > 为什么我不能得到我的当我在 html 元素上使用 click 事件时显示正确的 html？

angular - 为什么我不能得到我的当我在 html 元素上使用 click 事件时显示正确的 html？

问题描述

我已经制作了一个日历，以便在每个单元格中单击时能够安排事情。例如，如果我有一个现有的“约会”，当点击它或在<li>它里面应该弹出一个下拉框，上面写着“查看约会”。

如果我在元素内已存在的约会之外单击，单击时我希望它显示一个弹出下拉框，其中显示一组不同的菜单选项，例如“添加时间”、“查看时间”、“添加约会”， “查看约会。”

这是 .html 文件

<ng-container *ngIf="entries.length > 0 || appointments.length > 0 || recurrances.length > 0">
              <tr *ngFor="let w of allDates">
                <td class='days clickable' *ngFor="let d of w" (click)="openMenu($event,d)">
                  <span class="top-left">{{d.getDate()}}</span>
                  <h4 class="center">{{ getHours(d) }}</h4>
                    <ul>
                      <li class="sticky-note" *ngFor="let a of getAppointments(d)" (click)="openMenu2($event,a)">
                        {{a}}
                      </li>
                    </ul>
                </td>
              </tr>
            </ng-container>

            <ng-container *ngIf="entries.length == 0 && appointments.length == 0 && recurrances.length == 0">
              <tr *ngFor="let w of allDates">
                <td class='days' (click)="openMenu($event, d)" *ngFor="let d of w">
                    <span class="top-left">{{d.getDate()}}</span>
                </td>
              </tr>
            </ng-container>
        </table>
    </div>
</div>

<ng-template #userMenu let-e>
  <section class="user-menu">
    <div class="user-menu-item" (click)="showTicket(e)">View Ticket</div>
    <div class="user-menu-item" (click)="addTimeEntry(e)">Add time</div>
    <div class="user-menu-item" (click)="showTimeEntries(e)">View time</div>
    <div class="user-menu-item" (click)="addAppointment(e)">Add appointment</div>
    <div class="user-menu-item" (click)="showAppointmentEntries(e)">View appointments</div>
  </section>
</ng-template>
<ng-template #userMenu2 let-a>
  <section class="user-menu">
    <div class="user-menu-item" (click)="showAppointmentEntry(a)">View appointment</div>
  </section>
</ng-template>

有了上面的 html，我只显示第一个，<ng-template>无论是在元素内部但在元素外部单击<td>，<li>还是在<li>元素内部但不在 `' 元素内部单击。

那么，我该如何解决这个问题，以便在我单击元素<ng-template>内部时显示第二个，而当我单击元素外部时<li>仅显示第一个？<ng-template><li>

相关.ts代码

@ViewChild('userMenu') userMenu: TemplateRef<any>;
@ViewChild('userMenu2') userMenu2: TemplateRef<any>;

openMenu(event: MouseEvent, param: any) { this.popup.open(event,this.userMenu,param,'start','center'); }
openMenu2(event: MouseEvent, appointment: IAppointment) { this.popup.open(event,this.userMenu2,appointment,'start','center'); console.log("click")}
closeMenu() { this.popup.close(); }

标签： angularangular9

解决方案

Angular 是一个非常强大的框架，基于它我可以为你的问题提供解决方案，

td首先给出对as的哈希引用#tdElement，

然后使用(mouseenter)和的(mouseleave)事件来li添加和删除一个类do-not-clicktd

finallytd根据添加的类处理的点击事件do-not-click

这是一个演示

<td class='days clickable'
    #tdElement 
    *ngFor="let d of w" 
    (click)="tdElement.classList.contains('do-not-click') ? false : openMenu($event,d)">
     <span class="top-left">{{d.getDate()}}</span>
     <h4 class="center">{{ getHours(d) }}</h4>
     <ul>
        <li class="sticky-note" 
            *ngFor="let a of getAppointments(d)"
            (mouseenter)="tdElement.classList.add('do-not-click')" 
            (mouseleave)="tdElement.classList.remove('do-not-click')"
            (click)="openMenu2($event,a)">
          {{a}}
        </li>
     </ul>
 </td>

推荐阅读