从角度材质垫-选择-列表中删除所选项目
从角度材质垫-选择-列表中删除所选项目
提问于 2020-12-29 18:19:50
我需要能够从角度材料列表中删除选定的项目。为此，我决定从初始项数组中减去选定项的数组(不确定这是最好的方法)。
我的问题是，我找不到一种方法来将所选项目的数组从HTML传递到TS并处理它。
Angular Material的文档中包含以下示例：
{{x.selectedOptions.selected.y}}其中x是mat- selector list选择器的ID，y是对所选元素执行的操作。但这似乎只在HTML中有效。
下面是我的代码，它不能工作。
在HTML中，我设置了列表和触发删除功能的按钮。
<mat-selection-list #apps>
<mat-list-option *ngFor="let app of appList" [value]="app">
{{app}}
</mat-list-option>
</mat-selection-list>
<button
class='remove-button'
(click)="deleteSelected()"
mat-stroked-button color="primary">
Remove from list
</button>在这里我试图打乱所选的选项，但显然行不通，因为selectedOptions被声明为字符串数组，并且没有" selected“方法。我知道这是一次愚蠢的尝试，但无论如何，找不到更好的方法：)应该有一种方法将选定的元素作为数组传递给TS……
export class SubscriptionListComponent implements OnInit {
selectedOptions: string[]
appList: string[] = ['Instagram', 'Facebook', 'Telegram', 'WhatsApp', 'GitHub']
deleteSelected() {
this.appList.filter(x => !this.selectedOptions.selected.includes(x))
}这样做的目的是在单击按钮时修改appList，这样选定的元素就会从其中删除，并且不会显示在列表中。
回答 1
Stack Overflow用户
发布于 2020-12-30 18:13:30
对于那些可能面临同样挑战的人，我发布了对我有效的代码，并且完全按照我想要的做了(单击时从列表中删除选定的元素)。
HTML保持与上面相同。
TS：
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSelectionList } from '@angular/material/list';
@Component({
selector: 'app-subscription-list',
templateUrl: './subscription-list.component.html',
styleUrls: ['./subscription-list.component.scss']
})
export class SubscriptionListComponent implements OnInit {
@ViewChild('apps') selectionList: MatSelectionList
appList: string[] = ['Instagram', 'Facebook', 'Telegram', 'WhatsApp', 'GitHub']
deleteSelected() {
var selected: string[] = this.selectionList.selectedOptions.selected.map(s => s.value)
var diff = this.appList.filter(el => !selected.includes(el))
this.appList = diff
}
constructor() { }
ngOnInit(): void {
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65496858
复制相关文章
相似问题
角度材质垫-列表-选项
模糊垫选择的角度材质
角度材质垫-选择重用材质-选项
角度材质垫-选择下拉宽度
角度材质垫选择:取消选择更改事件
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
