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

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>