如何在 mat-list-option (mat-selection-list) 项中添加辅助操作答案

【问题标题】：how to add a secondary action in mat-list-option (mat-selection-list) item如何在 mat-list-option (mat-selection-list) 项中添加辅助操作
【发布时间】：2018-12-17 12:45:15
【问题描述】：

如何在 mat-list-option 元素内的 mat-selection-list 中添加辅助操作（mat-icon-button）。

目前所有项目都添加到 mat-list-text div 中。

示例 (https://stackblitz.com/edit/angular-dwac7y)：

<mat-selection-list [(ngModel)]="selectedOptions">
    <mat-list-option *ngFor="let item of items;" [value]="item.id" [disableRipple]="true">
        <mat-icon matListAvatar>person</mat-icon>

        <h3 matLine> {{item.name}}</h3>
        <p matLine>
            {{item.details}}
        </p>

        <button mat-icon-button (click)="onEdit($event, item)">
            <mat-icon>edit</mat-icon>
        </button>
    </mat-list-option>
</mat-selection-list>

【问题讨论】：

很抱歉回答迟了，很忙。感谢stackblitz。我仍然在努力理解你的目标是什么。您只想移动复选框旁边的“编辑图标按钮”吗？
嗨，克里斯，没错。就像导航列表的例子一样。

标签： angular angular-material2 angular-material-7

【解决方案1】：

你可以这样做。

<h2>Selection-List with secondary action:</h2>

<mat-selection-list [(ngModel)]="selectedOptions">
  <mat-list-option *ngFor="let item of items;" [value]="item.id" [disableRipple]="true">
    <div style="display:flex; justify-content:space-between;align-items:center">
      <div style="display:flex;align-items:center">
        <mat-icon matListAvatar>person</mat-icon>

        <div style="display:flex; flex-direction:column">
          <div>
            <h3 matLine> {{item.name}}</h3>
          </div>
          <div style="margin-top:-30px">
            <p matLine>
              {{item.details}}
            </p>
          </div>
        </div>
      </div>
      <div>
        <button mat-icon-button (click)="onEdit($event, item)">
          <mat-icon>edit</mat-icon>
        </button>
      </div>
    </div>
  </mat-list-option>
</mat-selection-list>

但是下面的样式...

<div style="margin-top:-30px">

不是一个好的解决方案。

【讨论】：

【解决方案2】：

我认为活动应该是这样的。

onEdit(event, item){
    event.stopPropagation();
}

【讨论】：