默认情况下如何在角度中选择mat-button-toggle答案

【问题标题】：How to mat-button-toggle by default selected in angular默认情况下如何在角度中选择mat-button-toggle
【发布时间】：2022-02-08 23:07:12
【问题描述】：

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

<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>

【问题讨论】：

标签： angular angular-material angular5

【解决方案1】：

我修好了。只需将value 属性添加到mat-button-toggle-group 标记即可。

<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>

【讨论】：

我投了赞成票，但你也可以在github上看到

【解决方案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>

【讨论】：

非常感谢！与 component.ts 的绑定是棘手的部分。
如何为按钮组设置多个选定的值？

【解决方案3】：

@Uliana Pavelko 的回答很棒。但是多选按钮组会是什么？

下面就是例子。不要忘记在

中将值作为字符串传递

public selectedVal: string;
constructor() { }

ngOnInit(){
  this.selectedVal =['2','6'];
}

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>

【讨论】：

【解决方案4】：

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

示例：

formControlName : ['All', Validators.required]

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

如果您正在使用 formcontrolName 并且它仍然没有采用您的 byDefault 值，那么试试这个，它对我有用：

<mat-button-toggle-group formControlName="boolValue" aria-label="Font Style">
    <mat-button-toggle value="false" [ngClass]="Form.controls['boolValue'].value ? '':'active'">Disable</mat-button-toggle>
    <mat-button-toggle value="true" [ngClass]="Form.controls['boolValue'].value ? 'active':''">Enable</mat-button-toggle>
</mat-button-toggle-group>

style.css

.active {background-color: #e0e0e0 !important;}

【讨论】：

【解决方案7】：

别忘了在你的module.ts中导入MatButtonToggleModule

使用formControlName 将表单链接到按钮切换

test.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
    public form: FormGroup;

    constructor(private formBuilder: FormBuilder) {
        this.form = this.formBuilder.group({
            choices: [1] // <-- Default value 1
        });
    }

    ngOnInit(): void {}
}

test.component.html

<form [formGroup]="form">
    <mat-button-toggle-group formControlName="choices">
        <mat-button-toggle [value]="1">Choice 1</mat-button-toggle>
        <mat-button-toggle [value]="2">Choice 2</mat-button-toggle>
        <mat-button-toggle [value]="3">Choice 3</mat-button-toggle>
    </mat-button-toggle-group>
</form>

适用于 Angular 12

【讨论】：