我想创建下拉列表来代替图形更改的按钮，但我的功能不起作用<select>，但使用按钮它工作正常

Question

这是我的html和ts代码，我想创建用于更改图形的下拉列表通过chartType函数，但发生错误不是一个函数，但该函数可以与按钮配合使用，但不能与下拉菜单配合使用

<div>
<button mat-raised-button color="warn" (click)="chartType('bar')">Bar Chart</button>
<button mat-raised-button color="primary" (click)="chartType('line')">Line Chart</button>
<button mat-raised-button color="accent" (click)="chartType('radar')">Radar Chart</button>
<button mat-raised-button color="primary" (click)="chartType('polarArea')">Polar Chart</button>

<select name="chartType" id="chartType" onchange="chartType(this)">
<option selected>Select Chart Type</option>
<option value="bar">Bar</option>
<option value="line">Line</option>
</select>


<div class = "chart" >
<canvas id="canvas"> {{charts}} </canvas>

</div>
</div>


chartType(type: any)
{
this.charts.destroy()
this.charts = new Chart('canvas', {
type: type,
data: {
labels: this.arr,

datasets: [{
label: 'IR',
data: this.a1,
borderWidth: 3,
fill: false,
backgroundColor: 'red',
borderColor: 'red'

}
]
}
})
}

Answer 1

如果在select元素上定义一个change事件处理程序，那么问题应该会得到解决。

<select (change)="chartType($any($event.target).value)">

请看一下这个StackBlitz，看看它是如何工作的。