with a single mat-select I can do it but I can't find the way in a table for that when the path changes and the user returns to the table, keep the last selected values. I can save the selected values in localstorage keeping in mind that the user could first select a value in the same row of the table and then a different one for which I apply a filter to save the last selected values but I can't be able to assign the values selected in localstorage to mat-selects to display after changing paths and back to table If someone from the community can help me, I appreciate it, I think there must be a simpler solution than the one I propose.
import { AfterViewInit, Component, ComponentFactoryResolver, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MatSelect } from '@angular/material/select';
interface Food {
value: string;
viewValue: string;
}
export interface Element {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: Element[] = [
{ position: 1, name: 'Hugo', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Heidy', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Laura', weight: 6.941, symbol: 'Li' },
{ position: 4, name: 'Bert', weight: 9.0122, symbol: 'Be' },
{ position: 5, name: 'Boroni', weight: 10.811, symbol: 'B' },
{ position: 6, name: 'Carl', weight: 12.0107, symbol: 'C' },
{ position: 7, name: 'Nest', weight: 14.0067, symbol: 'N' },
{ position: 8, name: 'Omar', weight: 15.9994, symbol: 'O' },
{ position: 9, name: 'Flora', weight: 18.9984, symbol: 'F' },
{ position: 10, name: 'Nery', weight: 20.1797, symbol: 'Ne' },
];
@Component({
selector: 'app-select',
templateUrl: './select.component.html',
styleUrls: ['./select.component.css']
})
export class SelectComponent implements AfterViewInit, OnInit {
public myForm!: FormGroup;
selectFood: SelectedFood[] = []
selectFoodName: SelectedFood[] = []
selectedValue!: string;
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'validFoo'];
dataSource = ELEMENT_DATA;
foods: Food[] = [
{ value: 'steak-0', viewValue: 'Steak' },
{ value: 'pizza-1', viewValue: 'Pizza' },
{ value: 'tacos-2', viewValue: 'Tacos' },
];
constructor(private fb: FormBuilder) {
}
ngOnInit() {
const localseleccion = localStorage.getItem('selectNames') || 'default-token';
console.log('localseleccion', localseleccion)
// valores seleccionados por el usuario si selecciono en una misma fila primero un valor
// y luego otro se guarda en el localstorage al ultimo para que si navega a otra pagina al regrear el select //muestre como valor al ultimo seleccionado y asi con todas las filas
// como se puede hacer por ejemplo usando setValue y el arrObject dar un valor por defecto a todos los select
// o seguramente de otra forma que no encuentro
const arryObject = JSON.parse(localseleccion);
console.log('arrObject!', arryObject);
/
this.myForm = this.fb.group({
foodControl: [''],
});
// this.myForm.get('foodControl')?.setValue('arryObject) como hacerlo ?????
}
ngAfterViewInit() {
}
doSomething(event: any, row: any): void {
console.log('Food changed...', row.name);
this.estado = event.source.value;
let name = row.name;
let foodSelect = this.estado;
let selecciono = { name: name, foodSelect: foodSelect }
console.log('selecciono!!!!!!', selecciono)
this.selectFood = [...this.selectFood, selecciono];
console.log('this.selectFood!', this.selectFood)
const namesFooSelect = this.selectFood.map(o => { let a = o.name; let b = o.foodSelect; return ({ a, b }) });
console.log('namesFooSelect!', namesFooSelect)
const names = this.selectFood.map(o => o.name);
console.log('names!', names);
this.selectFoodName = this.selectFood.filter(({ name }, index) => !names.includes(name, index + 1))
console.log('this.selectFoodName', this.selectFoodName)
localStorage.setItem("selectNames", JSON.stringify(this.selectFoodName));
this.selectedValue = localStorage.getItem('selectNames') || 'default-token';
console.log('this.selectedValue', this.selectedValue);
}
}<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value)">
<!--<div class="container text-center">-->
<table mat-table [dataSource]="dataSource" #mytable class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<ng-container matColumnDef="validFoo">
<th mat-header-cell *matHeaderCellDef> Foo </th>
<td mat-cell *matCellDef="let element">
<mat-form-field >
<mat-label>Favorite Food</mat-label>
<mat-select [disabled]="false" (selectionChange)="doSomething($event,element)" formControlName="foodControl" name='food'>
<mat-option></mat-option>
<mat-option [value]="option.viewValue"
*ngFor="let option of foods">
{{ option.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" >
</tr>
</table>
<!--</div>-->
</form>