как добавить вторичное действие в элемент mat-list-option (mat-selection-list)

Как это возможно, добавить вторичное действие (mat-icon-button) в список выбора mat внутри элемента mat-list-option.

В настоящее время все элементы добавляются в div-список mat-list-text.

пример (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>

angular angular-material2 angular-material-7
person Richard Liebmann    schedule 17.12.2018    source источник
comment
извините за поздний ответ, был занят. спасибо за stackblitz. Я все еще пытаюсь понять, какова твоя цель. Вы просто хотите переместить кнопку со значком редактирования рядом с флажками?   -  person Chris    schedule 17.12.2018
comment
Привет, Крис, да, именно так. Как в примере с nav-list.   -  person Richard Liebmann    schedule 18.12.2018

Ответы (2)


arrow_upward
4
arrow_downward

вы можете сделать это следующим образом.

<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">

имо не хорошее решение.

введите здесь описание изображения

person Chris    schedule 18.12.2018

arrow_upward
1
arrow_downward

Думаю, мероприятие должно выглядеть так.

onEdit(event, item){
    event.stopPropagation();
}
person Giancarlo G    schedule 11.07.2020