如何根据用户输入和切换按钮来切换垫切换按钮？

Question

我试图在项目中使用切换按钮，但发现自己陷于以下情况：

如果需要根据服务器提供的值来控制切换按钮，该怎么办？

这是我正在执行的代码。

 <mat-button-toggle-group name="fontStyle" [value]="selectedVal" #group="matButtonToggleGroup" (change)="onValChange(group.value)" aria-label="Font Style"> <mat-button-toggle value="true">True</mat-button-toggle> <mat-button-toggle value="false">False</mat-button-toggle> </mat-button-toggle-group> <div> [animation] = <span>{{selectedVal}}</span> </div> 

这是我的TS文件，可从按钮切换中获取所选值的值。

 import {Component} from '@angular/core'; /** * @title Basic button-toggles */ @Component({ selector: 'button-toggle-overview-example', templateUrl: 'button-toggle-overview-example.html', styleUrls: ['button-toggle-overview-example.css'], }) export class ButtonToggleOverviewExample { selectedVal:string; onValChange(val: string) { this.selectedVal = val; } } 

Answer 1

更改value =“ selectedVal”而不是[value] =“ selectedVal”

<mat-button-toggle-group name="fontStyle" value="selectedVal" #group="matButtonToggleGroup" (change)="onValChange(group.value)" aria-label="Font Style">
  <mat-button-toggle value="true">True</mat-button-toggle>
  <mat-button-toggle value="false">False</mat-button-toggle>
</mat-button-toggle-group>