具有列表样式的 Angular 的多选组件答案

【问题标题】：Multiple Select component for Angular with list style具有列表样式的 Angular 的多选组件
【发布时间】：2020-07-03 16:57:33
【问题描述】：

我需要一个选择组件，例如

问题是他们在 Material Angular 中没有它，所以我尝试在组件内使用默认 HTML 选择。它工作正常，直到我试图破坏 HTML 选择的视图（例如，当您重定向到其他页面时），它会冻结整个页面几秒钟（列表越大冻结时间越长）。

首先，有人知道为什么 Angular 需要一段时间来破坏非物质角度组件吗？那么有没有人有解决方案是让冻结消失还是指定我选择可以在 Angular 中完美使用的组件库？我真的需要能够通过 click + shift 选择多个项目的支持

这是我的组件代码：

HTML：

<div class="chart">
    <div class="toolbar">
        <div class="row">
            <i *ngIf="multiple" (click)="resetFilter()" class="option material-icons left">refresh</i>
            <h4>Sample Id</h4>
            <span class="option right"></span>
        </div>
    </div>
    <div class="content">
      <select *ngIf="!showSampleCSV" [multiple]="multiple" [size]="100" class="samples-list" [(ngModel)]="selectedSamples" (ngModelChange)="onSelect($event)">
        <option *ngFor="let sampleID of sampleIDs" [value]="sampleID">{{sampleID}}</option>
      </select>
      <app-samples-text *ngIf="showSampleCSV" [samples]="selectedSamples" [multiple]="multiple" (filterSamples)="filterCSV($event)"></app-samples-text>
    </div>
</div>

TS：

import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-samples-list',
  templateUrl: './samples-list.component.html',
  styleUrls: ['./samples-list.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SamplesListComponent implements OnInit, OnDestroy {
  @Input() sampleIDs : string[] = [];
  @Input() showSampleCSV : boolean;
  @Input() selectedSamples : string[];
  @Output() onSelectSamples = new EventEmitter<string[]>();
  @Output() onUpdateSamples = new EventEmitter<string[]>();
  @Input() multiple: boolean = true;
  size = this.sampleIDs.length;

  constructor() { }

  ngOnInit() {
  }

  resetFilter() {
    this.onSelectSamples.emit(this.sampleIDs);
  }

  onSelect(samples){
    this.onSelectSamples.emit(samples);
  }

  filterCSV(samples){
    this.onUpdateSamples.emit(samples.map(sample => sample.trim()));
  }

  ngOnDestroy() {
  }

}

stackblitz 上的问题说明https://stackblitz.com/edit/angular-qojyqc?embed=1&file=src/app/app.component.html

【问题讨论】：

我们可以看看你的组件代码（HTML & TS）吗？
angular material 中有一个多选选项。而且不知道为什么会冻结。您可以在此处添加代码或提供 slackblitz 网址吗？
当然，这是我的组件代码。如果我使用来自 Angular 材料的组件，当我尝试破坏视图时它不会冻结。但是，从 Angular Material 中选择组件没有 click + shift 来选择多个项目。
我无法使用此代码重现冻结问题。你能提供一个 slackblitz 吗？
@AkhiAkl stackblitz.com/edit/angular-qojyqc?embed=1&file=src/app/…。你去吧，也许你的列表不够大，导致它冻结。我尝试了 4000 个项目，每次尝试破坏视图时它已经冻结了 5-10 秒。

标签： html angular angular-material

【解决方案1】：

Material 确实提供了多选值的选项

<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [formControl]="toppings" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat- 
option>
</mat-select>
</mat-form-field>

欲了解更多信息，请转到Here

【讨论】：

我需要能够使用 shift + click 进行多项选择。角材料不支持这一点。 HTML 的默认样式非常适合我。

【解决方案2】：

ng-select 提供选择多个值的选项。

<ng-select [items]="items"
               bindLabel="name"
               placeholder="Select item"
               appendTo="body"
               multiple="true"
               [(ngModel)]="selected">
    </ng-select>

【讨论】：