Question

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

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

首先，有人知道Angular花费一段时间破坏非实质性角度分量的原因吗？那么，有没有人有办法解决冻结问题或任命我选择可以在Angular中完美使用的组件库呢？我确实需要能够通过单击+ 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() {
  }

}

堆栈闪电https://stackblitz.com/edit/angular-qojyqc?embed=1&file=src/app/app.component.html上的问题图示

Answer 1

材料确实提供了多个选择值的选项

<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

Answer 2

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

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

具有列表样式的Angular的多重选择组件

2 个答案: