Question

我正在为项目使用Angular 6，并且在代码中只有一个滑块单选按钮。

我有一个函数switchClicked，该函数负责根据此按钮的ON / OFF状态处理某些事件。

有什么方法可以将此按钮的On / Off值传递给我的函数。

<div class="col-3">
  <label class="slider-switch">
    <input type="checkbox" checked (click)="switchClicked()">
    <span class="slider-slider round"></span>
  </label>
</div>

Answer 1

您可以从方法中传递x1，该方法将包含不同的属性，包括选中的属性。

x2

打字稿：

id <- c("A11", "A12", "A13", "A21", "A22", "A23", "B11", "B12", "B13", "C11", "C12", "C13", "C21", "C22", "C23", "D11", "D12", "D13", "D21", "D22", "D23", "E11", "E12", "E13", "E21", "E22", "E23")
group <- c("A","A","A","A","A","A","B","B","B","C","C","C","C","C","C","D","D","D","D","D","D","E","E","E","E","E","E")
imputation <- c(rep(1:3, 9))
age <- c(45,45,45,17,17,17,20,20,20,70,70,70,60,60,60,25,25,25,30,30,30,28,28,28,34,34,34)
key1 <- c(1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,1,1,1,0,0,0)
key2 <- c(0,0,0,1,1,1,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0)
x1 <- c(3,3,3,3,3,3,0,0,0,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3)
x2 <- c(3,3,3,3,3,3,0,0,0,3,3,3,3,3,3,3,3,3,3,3,3,0,0,0,0,0,0)
test <- data.frame(id, group, imputation, age, key1, key2, x1, x2)

library(dplyr)

test %>% 
  group_by(group) %>% 
  filter(x1==x2 & x1>0 | x1==x2 & x2>0) %>%
  mutate(x1 = ifelse(unique(age[key1==1]) > unique(age[key2==1]), 3, 0),
         x2 = ifelse(unique(age[key1==1]) > unique(age[key2==1]), 0, 3)) %>%
  ungroup()

# # A tibble: 18 x 8
#   id    group imputation   age  key1  key2    x1    x2
#   <fct> <fct>      <int> <dbl> <dbl> <dbl> <dbl> <dbl>
# 1 A11   A              1    45     1     0     3     0
# 2 A12   A              2    45     1     0     3     0
# 3 A13   A              3    45     1     0     3     0
# 4 A21   A              1    17     0     1     3     0
# 5 A22   A              2    17     0     1     3     0
# 6 A23   A              3    17     0     1     3     0
# 7 C11   C              1    70     0     1     0     3
# 8 C12   C              2    70     0     1     0     3
# 9 C13   C              3    70     0     1     0     3
#10 C21   C              1    60     1     0     0     3
#11 C22   C              2    60     1     0     0     3
#12 C23   C              3    60     1     0     0     3
#13 D11   D              1    25     1     0     0     3
#14 D12   D              2    25     1     0     0     3
#15 D13   D              3    25     1     0     0     3
#16 D21   D              1    30     0     1     0     3
#17 D22   D              2    30     0     1     0     3
#18 D23   D              3    30     0     1     0     3

根据您的打开/关闭状态，它将为您提供$event的{{1}}属性“ true”或“ false”。

Answer 2

在HTML

 <div class="col-3">
      <label class="slider-switch">
        <input   type="checkbox"  [(ngModel)]="myCheckbox"  (ngModelChange)="switchClicked($event)">
        <span class="slider-slider round"></span>
      </label>
    </div>

在TS

  myCheckbox: any = true;

  switchClicked(event) {
    console.log(event);
  }

注意：如果没有事件，则可以使用myCheckbox属性获取复选框值，myCheckbox属性将使用双向数据绑定进行更新

要使用ngMode和ngModelChange，必须从

导入模块文件中的FormsModule。

import { FormsModule } from '@angular/forms';

Answer 3

一种不错的方法是使用Angular模板变量，如下所示：

<div class="col-3">
  <label class="slider-switch">
    <input #myCheckbox type="checkbox" checked (click)="switchClicked(myCheckbox.checked)">
    <span class="slider-slider round"></span>
  </label>
</div>

在您的打字稿中：

switchClicked(clicked) {
    console.log(clicked);
}

复选框按钮的开/关状态

3 个答案: