Угловой: MatSelectionList дополнительная интерактивная опция

Question

У меня есть MatSelectionList, где я должен отображать несколько строк для каждого параметра и отображать значок faMap.Если пользователь нажимает на карту, я должен отобразить фактическую карту в другом месте приложения.

Проблема заключается в том, что в списке выбора материала можно щелкнуть всю строку, чтобы отметить/ снимите флажок.Таким образом, если я нажму на значок карты, смена флажка тоже сработает, что нежелательно. Клик по карте должен быть отдельным действием от выбора флажка .

Пожалуйста, перейдите по этой ссылке для демонстрации StackBlitz.

Я нашел это решение , но у меня это не работает, так как у меня несколько матовых линий, и я не хочу, чтобы они скользили друг в друга.(Кроме того, это похоже на взлом?)

Я также вставлю код здесь:

html :

  <form [formGroup]="demoSelectForm">
    <mat-selection-list (selectionChange)="onSelectionChange($event)" formControlName="selection">
         <mat-list-option value="1"  checkboxPosition="before">

             <mat-icon mat-list-icon>
                  <fa-icon
                      [icon]="['far', 'map']"
                      (click)="onMapClick()"
                  >
                  </fa-icon>
              </mat-icon>

               <h4 mat-line>The option 1</h4>
               <p mat-line>Description line 1.1</p>
                <p mat-line>Description line 1.2</p>
                 <p mat-line>Description line 1.3</p>

         </mat-list-option>

          <mat-list-option value="2"  checkboxPosition="before">

             <mat-icon mat-list-icon>
                  <fa-icon
                      [icon]="['far', 'map']"
                      (click)="onMapClick()"
                  >
                  </fa-icon>
              </mat-icon>

               <h4 mat-line>The option 2</h4>
               <p mat-line>Description line 2.1</p>
                <p mat-line>Description line 2.2</p>
                 <p mat-line>Description line 2.3</p>

         </mat-list-option>


          <mat-list-option value="3"  checkboxPosition="before">

             <mat-icon mat-list-icon >
                  <fa-icon
                      [icon]="['far', 'map']"
                      (click)="onMapClick()"
                  >
                  </fa-icon>
              </mat-icon>

               <h4 mat-line>The option 3</h4>
               <p mat-line>Description line 3.1</p>
                <p mat-line>Description line 3.2</p>
                 <p mat-line>Description line 3.3</p>

         </mat-list-option>

    </mat-selection-list>
  </form>

   {{ demoSelectForm.get('selection').value | json }}

компонент :

import { Component } from '@angular/core';
import { AbstractControl, FormArray,FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  demoSelectForm = new FormGroup({
      selection: new FormControl([])
  });

  onSelectionChange($event) {
    // console.log($event);
  }

  onMapClick(): void {
    console.log('MAP GOT CLICKED');
  }
}

Answer 1

Даже если вы визуально убираете значки карты из области mat-list (используя position:absolute, карта все равно будет делать выбор, потому что значки являются потомками mat-list-option;

(взломать) решение было бы иметь 2 div, бок о бок ... left div имеет только флажок ... right div имеет текст (который теперь можно выбрать) и карту; (если вы хотите, чтобы текст был кликабельным, переместите текст в левое поле и настройте ширину;

релевантно HTML :

<div class='parentDiv'>
    <div class='leftSide'>
        <form [formGroup]="demoSelectForm">
            <mat-selection-list (selectionChange)="onSelectionChange($event)" formControlName="selection">
                <mat-list-option value="1" checkboxPosition="before">
                </mat-list-option>

                <mat-list-option value="2" checkboxPosition="before">
                </mat-list-option>

                <mat-list-option value="3" checkboxPosition="before">
                </mat-list-option>

            </mat-selection-list>
        </form>
    </div>

    <div class='rightSide'>
        <mat-selection-list>
            <mat-list-option value="1" checkboxPosition="before">
                <mat-icon mat-list-icon>
                    <fa-icon [icon]="['far', 'map']" (click)="onMapClick()">
                    </fa-icon>
                </mat-icon>
          <h4 mat-line>The option 1</h4>
                    <p mat-line>Description line 1.1</p>
                    <p mat-line>Description line 1.2</p>
                    <p mat-line>Description line 1.3</p>
                </mat-list-option>

            <mat-list-option value="3" checkboxPosition="before">
                <mat-icon mat-list-icon>
                    <fa-icon [icon]="['far', 'map']" (click)="onMapClick()">
                    </fa-icon>
                </mat-icon>
                    <h4 mat-line>The option 2</h4>
                    <p mat-line>Description line 2.1</p>
                    <p mat-line>Description line 2.2</p>
                    <p mat-line>Description line 2.3</p>
                </mat-list-option>

            <mat-list-option value="3" checkboxPosition="before">
                <mat-icon mat-list-icon>
                    <fa-icon [icon]="['far', 'map']" (click)="onMapClick()">
                    </fa-icon>
                </mat-icon>
                    <h4 mat-line>The option 3</h4>
                    <p mat-line>Description line 3.1</p>
                    <p mat-line>Description line 3.2</p>
                    <p mat-line>Description line 3.3</p>
            </mat-list-option>
        </mat-selection-list>

    </div>
</div>

{{ demoSelectForm.get('selection').value | json }}

релевантно CSS ;

.leftSide{width:50px; border-bottom:2px solid blue;float:left;}
.rightSide{width:calc(100% - 50px); border-bottom:2px solid red;float:left;}
::ng-deep .rightSide .mat-pseudo-checkbox{display:none;}
.rightSide .mat-list-item, .leftSide .mat-list-item{height:109px;}
.parentDiv{width:100vw;}

работает стек * здесь