小编Mat*_*ers的帖子

我需要修改标准Angular Material切换按钮组件的功能，以便单击活动按钮可使该组件返回没有按钮处于活动状态。这有两个步骤：

• 更新切换组的值
• 将点击按钮的“ checked”参数更改为false

我尝试了几种方法，例如

模板：

<mat-button-toggle-group #group="matButtonToggleGroup">
    <mat-button-toggle #no_btn value="no" (click)="update_toggle(group,no_btn)">No</mat-button-toggle>
    <mat-button-toggle #yes_btn value="yes" (click)="update_toggle(group,yes_btn)">Yes</mat-button-toggle>
</mat-button-toggle-group>

JS：

update_toggle(group,button){
    if(group.value==""){
        group.value = button.value;
    }
    else
    {
        group.value = "";
    }
button.checked=!button.checked;
}

但这不会更新按钮的“已检查”值，我想是因为update_toggle（）设置的组值与用户单击按钮的行为相冲突。

唯一有效的方法是：

<mat-button-toggle-group #group="matButtonToggleGroup">
    <mat-button-toggle #no_btn value="no" (click)="update_toggle(group,no_btn)" (click)="group.value=='no' ? checked=false : checked=false">No</mat-button-toggle>
    <mat-button-toggle #yes_btn value="yes" (click)="update_toggle(group,yes_btn)" (click)="group.value=='yes' ? checked=false : checked=false">Yes</mat-button-toggle>
</mat-button-toggle-group>

但是单个按钮上的两次单击事件感觉很棘手，特别是因为第二次单击中的三进制与本能地相反。

有什么更好的建议吗？

我试过了：

@ViewChildren('no_btn') no_btn: ElementRef;

然后：

this.no_btn['_results'][k]['_inputElement']['nativeElement']['checked']=false;

但是结果似乎与在函数中传递按钮引用没有什么不同。再次单击该按钮不会取消选中它。禁用确实有效，所以我认为我的代码是正确的：

this.no_btn['_results'][k]['_inputElement']['nativeElement']['disabled']=true;

使用 Angular 中新的类型化表单控件，我们可以做到这一点：

interface MyFormGroup {
    id: FormControl<number | null>;
    name: FormControl<string | null>;
    email: FormControl<string | null>;
}

FormControl它为下面的每个定义了一个类型FormGroup：

myFormGroup = new FormGroup<MyFormGroup>({
    id: new FormControl(42),
    name: new FormControl('Arthur'),
    email: new FormControl('arthur@dent.com')
});

该值的类型FormGroup为：

Partial<{
    id: number | null;
    name: string | null;
    email: string | null;
}>

如果我想FormGroup在函数中使用 the 的值，是否有获取该值类型的快捷方式，或者必须单独定义它，例如

interface MyFormGroupValue {
    id: number | null;
    name: string | null;
    email: string | null;
}

myFunction(myFormGroupValue: MyFormGroupValue){
    console.log(myFormGroupValue);
}

换句话说，是否可以 …

通过动态创建组件时或创建组件之后，只需具有文本的起点和终点，是否可以将诸如粗体/斜体或这两种样式一起应用于角度6中？现在，我可以为整个组件应用样式，但是我只想为元素中的特定文本应用样式，并且文本的长度将来自JSON。

请在此处找到stackblitz实现。

实际结果应根据偏移量和长度将样式应用于文本