从“角度材质垫选择”列表中删除选定项

Question

我需要能够从角材料列表中删除选定的项目。为此，我决定从初始项目数组中减去选定项目数组（不确定这是最好的方法）。

我的问题是，我找不到一种方法来将超文本标记语言中的选定项数组传递给TS并使用它。

Angular材料在其留档中有以下示例：

{{x.selectedOptions.selected.y}}

其中x是mat-seltion-list选择器的ID，y是对所选元素执行的操作。但这似乎只适用于超文本标记语言。

下面是我不工作的代码。

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被声明为字符串html" target="_blank">数组，并且没有“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，以便从其中删除所选元素，并且不显示在列表中。

Answer 1

对于那些可能面临同样挑战的人，我发布了适合我的代码，并完全按照我的要求执行（单击从列表中删除所选元素）。

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

}