En este momento renderizo para cada elemento seleccionado dentro de mi cuadro de selección de material angular de selección múltiple.
El renderizado funciona cuando estoy seleccionando un elemento dentro de él. Pero cuando deselecciono uno, simplemente sigue agregando.
Supongo que tengo que establecer una propiedad como deseleccionar o algo así, pero no estoy seguro, ¿alguien podría ayudarme?
HTML:
<mat-select [formControl]="person" required> <mat-option>--</mat-option> <mat-option *ngFor="let person of person" [value]="person" (click)="getPerson()"> {{person.name}} </mat-option> </mat-select> <div *ngFor="let person of personsArray"> <div class="card" > <div class="card-body dl-card-body-no-padding-bottom" > //element to render </div> </div>TS:
getPerson(){ this.personsArray.push(this.form.controls.person.value) }En su HTML para su mat-select , deberá incluir el atributo multiple .
Además, asegúrese de nombrar adecuadamente las matrices para almacenar los elementos de la matriz de origen y la matriz seleccionada. Es bastante confuso referirse a la person dos veces en la plantilla de selección.
Debe pasar datos al controlador de selección. Esto se hace como se muestra en el HTML modificado a continuación:
<mat-select [formControl]="person" required multiple> <mat-option>--</mat-option> <mat-option *ngFor="let person of personsArray" [value]="person" (click)="getPerson(person)" > {{ person.name }} </mat-option> </mat-select>En el código de su componente, incluya una matriz para la matriz de origen y la matriz de elementos seleccionados:
form: any; person = new FormControl(''); personsArray: Person[] = [ { name: 'bob' }, { name: 'dave' }, { name: 'fred' }, ]; selectedPersonsArray: Person[] = []; constructor() { this.form = new FormGroup({ person: new FormControl(''), }); }En su controlador de selección, debe manejar la adición y eliminación de elementos dependiendo de si ya existen (eliminar) o no existen (agregar) en la matriz de elementos seleccionados:
getPerson(val: Person) { console.log('selected person = ' + val.name); const person: Person = this.selectedPersonsArray.find( (p) => p.name === val.name ); console.log('sel person=' + person?.name); if (!person) this.selectedPersonsArray.push(val); if (person?.name) this.selectedPersonsArray = this.selectedPersonsArray.filter( (p) => p.name !== val.name ); }El objeto persona es solo una interfaz similar a esta:
export interface Person { name: string; }Lo anterior es suficiente para permitir que los elementos seleccionados o no seleccionados dentro del menú desplegable de selección múltiple se muestren dentro de la lista renderizada.