Блог

Мне нужно иметь возможность удалять выбранные элементы из списка материалов Angular. Для этого я решил вычесть массив выбранных элементов из исходного массива элементов (не уверен, что это лучший способ сделать это).

Моя проблема в том, что я не могу найти способ передать массив выбранных элементов из HTML в TS и поиграть с ним.

В документации Angular Material приведен следующий пример:

 {{x.selectedOptions.selected.y}}
 

где x — идентификатор селектора mat-selection-list, а 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>
 

TS, где я пытаюсь возиться с выбранными параметрами, но это, очевидно, не работает, потому что 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))
  }
 

Цель состоит в том, чтобы изменить список приложений при нажатии на кнопку, чтобы выбранные элементы удалялись из него и также не отображались в списке.

Для тех, кто может столкнуться с такой же проблемой, я публикую код, который сработал для меня и сделал именно то, что я хотел (удалить выбранные элементы из списка по щелчку мыши).

HTML остался таким же, как указано выше.

ТС:

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

}