javascript - Angular:MatSelectionList 额外的可点击选项

Question

我有一个 MatSelectionList，其中我必须为每个选项显示多行并显示一个 faMap 图标。如果用户点击 map ，我应该在应用程序的其他地方显示实际 map 。

问题是， Material 选择列表允许单击整行以标记/取消标记复选框。这样，如果我单击 map 图标本身，也会触发复选框更改，这是不希望的。 map 点击应该是独立于复选框选择的操作。

Please, follow this link for a StackBlitz demo.

我找到了 this solution ，但这对我不起作用，因为我有多条垫子线，我不希望它们相互滑入。 (此外，这似乎是一个 hack？)

我也把代码贴在这里:

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

即使您从视觉上将 map 图标移出 mat-list 区域(使用 position:absolute， map 仍会进行选择，因为图标是子图标mat-list-option;

一个(hack-ish)解决方案是有 2 个 div，并排...左边的 div 只有复选框...右边的 div 有文本(现在可以选择)和 map ； (如果您希望文本可点击，请将文本移至左侧 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;}

工作 stackblitz here