如何禁用mat-list-item的单击事件，仅启用maticon单击

Question

您好，我正在研究角度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>

谢谢

Answer 1

您可以通过执行以下操作停止即时传播： edit(event){ event.preventDefault(); // EDIT: Looks like you also have to include Event#stopImmediatePropagation as well event.stopImmediatePropagation(); } 我参考了以下链接作为我的解决方案。 mat-nav-list with secondary buttons