Question

每当我启动页面时，切换按钮都会显示，但是直到我切换按钮后，才会显示任何文本。

当您单击它时，它显示为“开”，但是再次单击时，切换按钮不会切换，并一直说“开”，但是当您再次单击它时，它的确变为“关”

我希望我的页面在加载时显示正确的切换文本，并在按下按钮时显示正确的切换文本。

这是html

<p>Toggle</p>
<mat-slide-toggle
[checked]="checked"
(click) = "hi()"
>{{toggle}}</mat-slide-toggle>

这是component.ts文件


  checked = true;
  toggle;

  hi(){
    if(this.checked == true){

      this.toggle = "on"
      this.checked = false;

    }
    else{

      this.toggle = "off"
      this.checked = true;

    }

  }

Answer 1

根据slide toggle API，您将使用change事件而不是click事件。 change公开一个类型为MatSlideToggleChange的事件，该事件具有一个checked属性，可用于有条件地更新checked和toggle属性值：

组件示例：

import { Component } from '@angular/core';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';

@Component({
  selector: 'slide-toggle-overview-example',
  templateUrl: 'slide-toggle-overview-example.html',
  styleUrls: ['slide-toggle-overview-example.css'],
})
export class SlideToggleOverviewExample {
  checked: boolean = false;
  toggle: string = "off";

  handleChange(event: MatSlideToggleChange) {
    if (event.checked) {
      this.toggle = "on"
      this.checked = true;
    } else {
      this.toggle = "off"
      this.checked = false;
    }
  }
}

HTML示例：

<mat-slide-toggle [checked]="checked" (change)="handleChange($event)">Slide me!</mat-slide-toggle>
{{checked}}
{{toggle}}

这是一个simple example。您可以根据需要调整toggle的值，因为不清楚您希望显示什么。

希望有帮助！

在使用mat-slide-toggle切换切换按钮之前，如何显示自己的文本状态

1 个答案: