我有一个 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');
}
}
最佳答案
即使您从视觉上将 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;}
关于javascript - Angular:MatSelectionList 额外的可点击选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56864482/