Fatal编程技术网
  • javascript/
  • Javascript 角度：Mats选择列表其他可单击选项

Javascript 角度：Mats选择列表其他可单击选项

javascript css angular typescript angular-material

Javascript 角度：Mats选择列表其他可单击选项,javascript,css,angular,typescript,angular-material,Javascript,Css,Angular,Typescript,Angular Material,我有一个MatSelectionList，其中必须为每个选项显示多行，并显示一个faMap图标。如果用户单击地图，我应该在应用程序的其他地方显示一个实际的地图 问题是，材料选择列表允许单击整行以标记/取消标记复选框。这样，如果我单击地图图标本身，复选框更改也会触发，这是不需要的映射单击应该是与复选框选择分开的操作 我发现了，但这对我不起作用，因为我有多条垫子线，我不希望它们滑入彼此。（而且，它看起来像是一个黑客？） 我还将在此处粘贴代码： html： <form [formGrou

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

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

我发现了，但这对我不起作用，因为我有多条垫子线，我不希望它们滑入彼此。（而且，它看起来像是一个黑客？）

我还将在此处粘贴代码：

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');
  }
}

<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 }}
即使您从
mat list
区域（使用
position:absolute
）中直观地取出地图图标，地图仍会进行选择，因为图标是
mat list选项的子项

一个（黑客式）解决方案是有两个分区并排…左分区只有复选框…右分区有文本（现在可以选择）和地图；（如果您希望文本可以单击，请将文本移动到左分区并调整宽度

相关的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');
  }
}



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



根据您的问题，您希望只在复选框上单击复选框，而不是在其他任何地方单击复选框，对吗？@nitin9nair没关系，您是对的，最好的方法是只在用户直接单击复选框时选中复选框，而不是在任何垫线或其他地方。这样，文本甚至可以选择和复制。