Question

摘要：

我有一个mat-dialog，目的是创建/编辑/删除“ equipos”（硬件）及其所有组件，并将信息保存在我的数据库中。在其内部，有几个动态构建的mat-select字段，负责从所述硬件中添加或删除“ dispositivos”（设备）。

问题：

一些动态选择字段检索的选项数量非常大，因此我需要实现某种过滤器，以便用户轻松浏览所有这些选项。

我的尝试

我一直在尝试使用mat-select-filter库，但是我不知道如何在用例上完全实现它。

HTML：

<div *ngFor="let clase of dispositivosByClases; index as i;" formArrayName="dispositivosForm">
    <div [formGroupName]="i">
        <div>
            <mat-form-field *ngIf="tabImpresoraEscaner.includes(clase.nombre)" class="dispositivo">
                <mat-select (selectionChange)="checkForm()" formControlName="dispositivos"
                    placeholder="{{clase.nombre}}" multiple>
                    <mat-select-filter (filteredReturn)="filteredList =$event" [array]="clase.dispositivos"
                        [displayMember]="'descripcion'" [placeholder]="'Filtrar'"></mat-select-filter>
                    <mat-option *ngFor="let dispo of clase.dispositivos" [value]="dispo.id">
                        {{ dispo.descripcion }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
    </div>
</div>

TS：

prepareClaseDispositivo() {
    this.dispositivos.forEach(dispo => {
        if (!this.labelDispositivos.includes(dispo.clase_dispositivo.nombre)) {
            this.labelDispositivos.push(dispo.clase_dispositivo.nombre);
        }
    });
    this.labelDispositivos.forEach(clase => {
        this.dispositivosForm.push(this.generateFormGroup([], clase));
        const dispositivosByClase = [];
        this.dispositivos.forEach(dispo => {
            if (clase === dispo.clase_dispositivo.nombre) {
                dispositivosByClase.push(dispo);
            }
        });
        this.filteredList[clase] = dispositivosByClase.slice();
        this.dispositivosByClases.push({ nombre: clase, dispositivos: dispositivosByClase });
    });
    if (this.data.edit) {
        this.populateFormGroup();
    }
}

这里的问题是，要使其正常工作，我需要更换

<mat-option *ngFor="let dispo of clase.dispositivos" [value]="dispo.id">
    {{ dispo.descripcion }}
</mat-option>

使用

<mat-option *ngFor="let filteredOptions[clase] of clase.dispositivos" [value]="item">
    {{ item.descripcion }}
</mat-option>

但是clase.dispositivos负责预选硬件存储在其数据库条目中的所有设备，所以这不是一个选择。

如果您需要查看代码库的任何其他部分，或者需要我澄清任何内容，请告诉我。

Answer 1

您需要的是管道。您的语法看起来像（伪代码）：

<mat-select ...>
    <mat-option *ngFor="let dispo of (clase.dispositivos | dispoPipe)" [value]="dispo.id">
        {{ dispo.descripcion }}
    </mat-option>
</mat-select>

...

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'dispoPipe' })
export class DispoPipe implements PipeTransform {

    transform(allDispos: Dispo[]) {
        return allDispos.filter(dispo => ???);
    }
}

Answer 2

设法发现了这个问题。

<mat-select (selectionChange)="checkForm()" formControlName="dispositivos" placeholder="{{clase.nombre}}" multiple>
    <mat-select-filter (filteredReturn)="filteredList[clase.nombre] =$event" [array]="clase.dispositivos"
        [displayMember]="'descripcion'" [placeholder]="'Filtrar'"></mat-select-filter>
    <mat-option *ngFor="let dispo of filteredList[clase.nombre]" [value]="dispo.id">
        {{ dispo.descripcion }}
    </mat-option>
</mat-select>

在(filteredReturn)上，我没有正确导航对象，应该是：

(filteredReturn)="filteredList[clase.nombre] =$event"

代替：

(filteredReturn)="filteredList =$event"

然后在选项的ngFor上将clase.dispositivos替换为filteredList[clase.nombre]。

如何在垫选中包括搜索/过滤器框

2 个答案: