要解决Angular中mat-button-toggle渲染不绑定到ngModel的问题,你可以按照以下步骤进行操作:
首先,确保你已经正确导入了MatButtonToggleModule模块,这是使用mat-button-toggle组件的前提。
在你的组件中,创建一个变量来存储mat-button-toggle的值,并将其与ngModel指令绑定。例如:
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: `
Option 1
Option 2
Option 3
`,
})
export class ExampleComponent {
selectedValue: string;
}
在上面的示例中,我们在mat-button-toggle-group
元素上使用了[(ngModel)]
来将selectedValue变量与ngModel指令进行双向绑定。
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
// 其他导入的模块
],
// 其他配置
})
export class YourModule { }
通过正确导入FormsModule,可以确保ngModel指令正常工作。
这样,当你选择不同的mat-button-toggle选项时,selectedValue变量将自动更新。你可以在组件中使用selectedValue变量来进行任何进一步的操作。