Question

如何在切换组中设置默认选择的最后一个按钮这是我的代码。

<mat-button-toggle-group #group="matButtonToggleGroup">
    <mat-button-toggle value="Heritage">
        <span>Heritage</span>
    </mat-button-toggle>
    <mat-button-toggle value="Nature">
        <span>Nature</span>
    </mat-button-toggle>
    <mat-button-toggle value="People">
        <span>People</span>
    </mat-button-toggle>
    <mat-button-toggle value="All">
        <span>All</span>
    </mat-button-toggle>
</mat-button-toggle-group>

Answer 1

我解决了。将值属性添加到根标记。：）

<mat-button-toggle-group #group="matButtonToggleGroup" value="All">
<mat-button-toggle value="Heritage">
    <span>Heritage</span>
</mat-button-toggle>
<mat-button-toggle value="Nature">
    <span>Nature</span>
</mat-button-toggle>
<mat-button-toggle value="People">
    <span>People</span>
</mat-button-toggle>
<mat-button-toggle value="All">
    <span>All</span>
</mat-button-toggle>

Answer 2

希望这会对某人有所帮助。

public selectedVal: string;
constructor() { }

ngOnInit(){
  this.selectedVal ='option1';
} 

public onValChange(val: string) {
  this.selectedVal = val;
}

 <mat-button-toggle-group #group="matButtonToggleGroup" [value]="selectedVal" (change)="onValChange(group.value)" >
  <mat-button-toggle value="option1">
    Option 1
  </mat-button-toggle>
  <mat-button-toggle value="option2">
    Option 2
  </mat-button-toggle>
</mat-button-toggle-group>

Answer 3

@Uliana Pavelko的回答很棒。但是，对于多个选定的按钮组将是什么？

贝勒就是一个例子。不要忘记将值作为字符串传递给

Answer 4

对于使用FormBuilder的用户，我建议填充.ts文件中的默认值

示例：

formControlName : ['All', Validators.required]

Answer 5

万一有人被卡住了。我将对象保存在我的 value attribute 上，并将 checked attribute 设置为 index === 0。

<mat-button-toggle [value]="object" *ngFor="let object of objectsList; let i = index" [checked]="i === 0">{{object.name }}</mat-button-toggle>

如何在角度5中选择默认的mat-button-toggle

5 个答案: