I’m working on a test project using angular where I need to select a branch and as soon as I select it, graphics will load with the selected branch’s information.
When the page loads the first time, I wanted the select to come pre-selected with the item coming from the api, but whenever the page loads the first time, it gives an error and only loads some data if I manually select some branch.
I can set the value in the select using [value]='selectedOption'
HTML:
<mat-form-field style="margin-top: 25px;align-items: right" appearance="fill">
<mat-label>Selecione uma Filial</mat-label>
<mat-select [value]='selectedOption' (selectionChange)="onSelectionChange($event)">
<mat-option *ngFor="let select of selectedAll" [value]="select.id">{{select.name}}</mat-option>
</mat-select>
</mat-form-field>
COMPONENT.TS:
import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
import { ChartOptions } from 'chart.js';
import { AccountService } from '../account/shared/account.service';
import { Observable } from 'rxjs';
import { MatSelect } from '@angular/material/select';
@Component({
selector: 'app-charts',
templateUrl: './charts.component.html',
styleUrls: ['./charts.component.scss'],
})
export class ChartsComponent implements OnInit {
@ViewChild('changeEl', { static: false }) changeEl?: MatSelect;
public selectItemBranch?: Observable<any>;
itemBranch: any = [];
itemsEvents: any = [];
itemsDrivers: any = [];
itemsAssets: any = [];
selectedOption: any;
@Output() newItemBranchEvent = new EventEmitter<any>();
selectedAll: any = [];
public selectedBranch: any;
selected: any = [];
public barChartOptions: ChartOptions = {
responsive: true,
indexAxis: 'y',
};
onSelectionChange(itemBranch: any) {
this.itemsAssets = []
this.itemsDrivers = []
this.itemsEvents = []
this.selectItemBranch = itemBranch.value;
console.log(this.selectItemBranch);
}
seeMeBranch() {
this.selected = this.accountService.meBranch().subscribe(
resp => {
this.selectedAll = resp;
this.selectedBranch = this.selectedAll.id
this.selectedOption = this.selectedAll[0].id
console.log(this.selectedOption)
});
}
addItemEvents(event: any) {
this.itemsEvents = event;
}
filterBranch(name: string) {
let arr = this.selectedAll.filter(
(branch: any) => branch.name.toLowerCase().indexOf(name.toLowerCase()) === 0
);
return arr.length ? arr : [{ name: 'No Item found' }];
}
addItemDrivers(event: any) {
this.itemsDrivers = event;
}
addItemAssets(event: any) {
this.itemsAssets = event;
}
addItemBranch(event: any) {
this.itemBranch = event;
}
constructor(private accountService: AccountService) {
}
ngOnInit() {
console.log(this.selectedOption)
this.seeMeBranch();
console.log(this.selectedBranch)
}
}After setting the selectedOption in mat-select, it does not load the data because it comes undefined:
Error: {"timestamp":"2023-05- 11T21:21:09.099+00:00","status":400,"error":"Bad Request","path":"/api/events/quantity/branch/undefined"}
I’m calling seeMeBranch in ngOnInit:
ngOnInit() {
this.seeMeBranch();
}
But when I click on any other branch of mat-select the data appears normally:
2
Answers
As the call is async try this approach using two way binding
[(value)]="selectedOption". It would be better to debug if you provide a working stackblitzts
try