I recently implemented a service that fetches JSON data and subscribes to two different variables within my component. These variables are then used by two separate drop-down lists to filter the data accordingly. The filtered data is then sent to another set of buttons, which can display the data as an array or a list. It is important that each drop-down operates independently.
<div class="TSO-ddl" >
<md-select [(ngModel)]="selectedISO" (ngModelChange)="onSelect($event,selectedISO)" placeholder="TSO" >
<md-option value="Charge Only" > Charge Only </md-option>
<md-option value="PJM" >PJM </md-option>
<md-option value="Not in ISO Market" > Not in ISO Market </md-option>
<md-option value="UCSD" > UCSD </md-option>
<md-option value="Any" > Any </md-option>
</md-select>
</div>
<div class="Status-ddl">
<md-select [(ngModel)]="selectedStatus" (ngModelChange)="onSelect($event,selectedStatus)" placeholder="Status" >
<md-option value="NC" > Not Connected </md-option>
<md-option value="GI" > Active </md-option>
<md-option value="SLP" > Sleeping </md-option>
<md-option value="IA" > Inactive </md-option>
<md-option value="Any" > Any </md-option>
</md-select>
</div>
<md-list-item class="ui-primary-selector">
<div>
<label class="labeltag"> View </label>
<button md-button *ngFor="let view of viewButtons " [ngClass]="{'selected-item' :view === selectedView}" type="button" (click)="onClickView(selecctedISO,view); onClickView2(selectedStatus,view)">
{{view.Name}} </button>
</div>
</md-list-item>
TS file
constructor(private vehicleService: VehicleService) {
this.isoArray = [];
this.statusArray = [];
this.isoToShow = this.isoArray;
this.statusToShow = this.statusArray;
}
ngOnInit() {
this.vehicleService.getIVS()
.subscribe(isoArray => {
this.isoArray = isoArray;
this.isoToDisplay();
},
error => this.errorMessage = <any>error);
this.vehicleService.getIVS()
.subscribe(statusArray => {
this.statusArray = statusArray;
this.statusDisplay();
},
error => this.errorMessage = <any>error);
}
viewButtons: IButton[] = [
{ Id: 1, Name: 'Array' },
{ Id: 2, Name: 'List' }
];
onSelect(val, button: IButton) {
if (val = "Charge Only" || "PJM" || "USCD" || "Not in ISO Market" || "Any") {
this.selectedISO = val;
this.onClickView(val, button)
}
else if (val = "NC" || "GI" || "SLP" || "IA") {
this.selectedStatus = val;
this.onClickView2(val, button);
}
console.log(val);
}
onClickView2(val, button: IButton) {
this.selectedView = button;
if (button.Id == 1) {
val = this.selectedStatus;
console.log(val);
if (val === "Any")
{ this.statusToShow = this.statusArray; }
else
{ this.statusToShow = this.statusArray.filter(resource => resource.primary_status === val); }
//displays an array
}
else if (button.Id == 2) {
val = this.selectedStatus;
if (val === "Any")
{ this.statusToShow = this.statusArray; }
else
{ this.statusToShow = this.statusArray.filter(resource => resource.primary_status === val); }
}
//displays a list
}
onClickView(val, button: IButton) {
this.selectedView = button;
if (button.Id == 1) {
val = this.selectedStatus;
console.log(val);
if (val === "Any")
{ this.isoToShow = this.isoArray; }
else
{ this.isoToShow = this.isoArray.filter(resource => resource.iso_id === val); }
//displays an array
}
else if (button.Id == 2) {
val = this.selectedStatus;
if (val === "Any")
{ this.isoToShow = this.isoArray; }
else
{ this.isoToShow = this.isoArray.filter(resource => resource.iso_id === val); }
}
//displays a list
}
One challenge I am facing is that the event only gets sent to one of the functions, resulting in a null value for the other function. I am seeking guidance on how to ensure data is sent to both functions from the onSelect() when there is a corresponding value.