cara menambahkan tindakan sekunder di item mat-list-option (mat-selection-list).

Bagaimana mungkin, untuk menambahkan tindakan sekunder (tombol ikon mat) di daftar pilihan mat di dalam elemen opsi daftar mat.

Saat ini semua item ditambahkan di dalam div mat-list-text.

contoh (https://stackblitz.com/edit/angular-dwac7y):< /kuat>

<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 sumber
comment
maaf atas jawaban yang terlambat, sedang sibuk. terima kasih untuk stackblitznya. saya masih berjuang untuk memahami apa tujuan Anda. Apakah Anda hanya ingin memindahkan tombol ikon edit di samping kotak centang?   -  person Chris    schedule 17.12.2018
comment
Hai Cris, ya benar. Seperti contoh dengan nav-list.   -  person Richard Liebmann    schedule 18.12.2018

Jawaban (2)


arrow_upward
4
arrow_downward

Anda bisa melakukannya sebagai berikut.

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

tapi gaya berikut...

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

bukan solusi yang baik menurutku.

masukkan deskripsi gambar di sini

person Chris    schedule 18.12.2018

arrow_upward
1
arrow_downward

Saya pikir acaranya akan terlihat seperti ini.

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