Question

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

问题是，材料选择列表允许单击整行以标记/取消标记复选框。这样，如果我单击地图图标本身，也会触发复选框更改，这是不希望的。 点击地图应与复选框选择分开进行。

Please, follow this link for a StackBlitz demo.

我找到了this solution，但是这对我不起作用，因为我有多条垫线，并且我不希望它们彼此滑入。（还好像是黑客吗？）

我还将在此处粘贴代码：

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 ...左侧div仅具有复选框...右侧div具有文本（现在可以选择）和地图；（如果您希望文本可点击，请将文本移至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 }}

角度：MatSelectionList其他可点击选项

1 个答案: