首页 > 解决方案 > 如何在滑动切换角度 2(材料 - 工具栏)中调用方法?

问题描述

HTML FILE

                            <div class=" -toolbar ">
                                <p>
                                    <mat-toolbar>
                                        <h4>Offer Mapping</h4>
                                        <div class="row align-right col-md-offset-7 col-md-1 ">
                                            <mat-form-field class="button-spacing">
                                                <mat-select placeholder="select">

                                                </mat-select>
                                            </mat-form-field>
                                            <button mat-raised-button (click)="campaignPrioritise()"  [disabled] class="button-spacing">
                                                Prioritise
                                            </button>
                                            
                                           <button mat-icon-button color="primary" (click)="createNewCampaign()">
                                                <mat-icon aria-label="Example icon-button with a heart icon">add_circle_outline</mat-icon>
                                            </button>
                                            <mat-slide-toggle *ngIf= "let element" class="material-icons color_green" matTooltip="Prioritise"
                                            [checked]="element.priority" (change)="campaignPrioritise(element)"></mat-slide-toggle>
                                        </div>
                                    </mat-toolbar>
                                </p>
                            </div>

TS 文件

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';



/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  timeSelection1 = '';
  timeSelection2 = '';

  selected: any[] = [];
  selected1 : any[] = [];



on(element){
  let priority = false;
        element.priority = !element.priority;
}

}

当我滑动切换时,优先级变量变为真和假我如何实现这是垫工具栏我试图编写一些代码但滑动切换没有显示在垫工具栏中!
当我按下拨动开关时,优先开关变为真,当滑动到左侧拨动开关变为假。这是我的 StackBlitz 链接 - https://stackblitz.com/edit/toggle12345677709-gfj1?file=main.ts

标签: angulartypescriptangular-material

解决方案


上面的代码中没有element声明。如果你有element它可以正常工作

element:any = {
   priority: false
 }

on(){
  let priority = false;
  this.element.priority = !this.element.priority;
}

推荐阅读