时间戳

首页 > 解决方案 > 如何禁用 mat-list-item 的点击事件启用仅 maticon 的点击

angular5 - 如何禁用 mat-list-item 的点击事件启用仅 maticon 的点击

问题描述

嗨，我正在研究 angular 5。我想禁用 mat-list-item 的单击事件，希望仅启用 mat-icon 的单击操作。

  <mat-nav-list>
            <mat-list-item
              *ngFor="
                let item of (speciality_list | listFilter: { name: searchText })
              "
              [class.disabled]="!item.status"
              [ngClass]="item.id == specialityActiveId ? 'active' : ''"
              (click)="onRowClick(item, 'speciality')"
            >
              <div matLine>
                <div fxLayout="row">
                  <div fxFlex="80">{{ item.name }}</div>
                  <div fxFlex="12" >
                    <button class="cursor-default"
                      mat-icon-button
                      (click)="edit($event, 'speciality', item)"
                    >
                      <mat-icon class="mat-17">edit</mat-icon>
                    </button>
                  </div>

                    <div fxFlex="8">
                      <button mat-icon-button mat-icon-button>
                        <mat-icon class="mat-17">arrow_forward_ios</mat-icon>
                      </button>
                    </div>

                </div>
              </div>
            </mat-list-item>
          </mat-nav-list>

谢谢，

标签： angular5

解决方案

您可以通过这样做来停止立即传播： edit(event){ event.preventDefault(); // EDIT: Looks like you also have to include Event#stopImmediatePropagation as well event.stopImmediatePropagation(); } 我参考了以下链接以获取我的解决方案。 带有辅助按钮的 mat-nav-list

推荐阅读