Bonjour,

J'utilise un mat-select avec des valeurs à cocher pour une selection multiple de filtres et tout ceci se trouve dans un widget. Je me suis basé sur cet exemple pour le select à choix multiple https://material.angular.io/components/select/overview#select-multiple.

<mat-form-field>
  <mat-select [formControl]="checkList" placeholder="{{placeHolder}}" [(ngModel)]="seletedValuesFilter"
    (ngModelChange)="changeFilter($event)" multiple>
    <mat-option>--</mat-option>
    <mat-option *ngFor="let v of values" [value]="v.key">
      {{ v.key | translate }} ({{v.doc_count}})
    </mat-option>
  </mat-select>
</mat-form-field>

Mon soucis c'est quand je veux supprimer un filtre dans la liste des filtres sélectionnés, il ne vient pas se décocher dans les options du select mais si je le décoche l'une des options, le filtre est bien supprimé. Le checkList est un formControl qui n'est pas dans un formGroup, je ne peux pas utiliser removeAt sinon j'ai "ERROR TypeError: control.removeAt is not a function". Comme c'est un formControl, un this.checkList.value = [mes filtrres actuels] ne fonctionne pas, enfin sur le coup oui mais si je recharge docker j'ai une erreur, logique.

    ngOnInit() {
        this.subscriptionFilter = this.filterService.filters.subscribe(
            filters => this.findFilter(filters)
        );
    }

    ngOnDestroy() {
        this.subscriptionFilter.unsubscribe();
    }

    findFilter(filters: Filter[]) {
        this.filter = filters.find(filter => filter.field === this.field);
        let selectedValues = this.filterService['dataFilter'].filter(v => v.field === this.field);
        let index = this.filterService['dataFilter'].indexOf(selectedValues[0]);

        if (!this.filter) {
            this.seletedValuesFilter = [];
            if (selectedValues && selectedValues.length !== 0) {
                selectedValues.forEach(s => {
                    this.seletedValuesFilter.push(s);
                });
            }

            if (this.checkList && this.checkList.value && this.checkList.value.length === 0 && index !== -1 && this.filterService['dataFilter'][index] && this.filterService['dataFilter'][index].values) {
                this.filterService['dataFilter'][index].values = [];
            }
        } else {
            if (this.filter.values === undefined) {
                this.filterService.removeFilter(this.filter);
            } else {
                if (this.filter.values.length !== 0) {
                    this.seletedValuesFilter = this.filter.values;
                }

                if (this.checkList && this.checkList.value && this.checkList.value.length === 0 && index !== -1 && this.filterService['dataFilter'][index] && this.filterService['dataFilter'][index].values) {
                    this.filterService['dataFilter'][index].values = [];
                } else {
                    if (this.checkList.value && this.checkList.value.length !== 0) {
                        this.checkList.value.forEach(v => {

                            selectedValues = this.filterService['dataFilter'][index].values.filter(f => f === v);
                            if (selectedValues.length === 0) {
                                index = this.checkList.value.indexOf(v);
                                const control = <FormArray>this.checkList;

                                control.removeAt(index);
                            }
                        });
                    }
                }
            }
        }
    }

Si vous avez une idée, je suis preneur.

Merci !

Aucune réponse