typescript - Rendera olika diagram beroende på värdet i rullgardinsmenyn i Angular
Jag har en mat-select med några alternativ och renderar ett Google linjediagram baserat på datan från value mappad till de specifika alternativen.
När jag ändrar valet kan jag se value ändras med selectionChange($event)-funktionen, och de data jag vill ha är också korrekta, men diagramdiven uppdateras/renderas inte om.
Hur gör jag så att det uppdateras vid ändring av alternativ.
Här är lite av min kod:
<mat-form-field class="cDropdown">
<mat-select [(ngModel)]="ids[a.name]" panelClass="selectplantdropdown" (selectionChange)="onChangeEvent($event)">
<mat-option [value]=a.id>{{ a.name }}</mat-option>
<ng-container *ngFor="let b of temp">
<mat-option [value]=b.id (click)="switchCustomer()">
{{ b.name }}
</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
Detta är div:en för linjediagrammet
<div style="font-weight: bolder; padding: 10% 40%">{{ chartData[ids[a.name]][0].data[1] }} {{ ids[a.name] }} CHART GOES HERE
</div> /*I can see the values changing here as well*/
<div>
<app-linechart [data]="chartData[ids[a.name]][0].data" [config]="config" [elementId]="ids[a.name]"></app-linechart>
</div>
REDIGERA: Detta är onChangeEvent($event)-funktionen från .ts-filen
onChangeEvent(event) {
console.log(event.value);
console.log(JSON.stringify(this.chartData[event.value][0].data));
}