复选框角度

Question

我正在使用 Angular，我不确定它是否有问题。 所以我有一个复选框，当我单击它时，它可以工作，但是当我需要选择另一个对象时 我需要点击它。看起来它（复选框）具有以前的状态。 如果我选择要单击的另一个元素，我需要它。它具有默认状态（未勾选（假））。

.ts

show = false

toggleContract() {
   this.show = !this.show
}

.html

<p-checkbox  (click)='toggleContract()' [ngModel]="show"></p-checkbox>
<ng-container *ngIf="show"><ng-container />

Answer 1

您是否尝试将

ngModelOptions="{standalone: true}"

添加到您的复选框中？

Answer 2

您可以使用两种方式绑定

[(ngModel)]

，那么您就不需要处理该事件。 Angular 会自行完成。

HTML：

<p-checkbox  [(ngModel)]="show"></p-checkbox>
<ng-container *ngIf="show"><ng-container />

打字稿：

show = false

Answer 3

假设您正在使用 PrimeNG - 由 p-checkbox 做出的假设

由于某种原因，primeNG 看起来有多个默认值设置，因此需要一个数组。显然，您可以传递

[binary]="true"

来覆盖此功能并直接绑定到单个布尔值。

<p-checkbox [(ngModel)]="show" [binary]="true"></p-checkbox>

Answer 4

<section class="content">
    <ul class="list">
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox" checked>
            Item 1
      </label>
    </li>
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox">
            Item 2
      </label>
    </li>
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox">
            Item 3
      </label>
    </li>
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox">
            Item 4
      </label>
    </li>
  </ul>
</section>

@import "bourbon";

$baseFontSize: 16;

$green: #009688;
$blue: #5677fc;
$blueDark: #3b50ce;

$slideDistance: 100;
$slideDuration: .4s;

@function rem($val) {
  @return #{$val / $baseFontSize}rem;
}

body {
  font-size: #{$baseFontSize}px;
}

.header {
  height: 8rem;
  
  background:  $green;
}

.content {
  @extend %slide-up;
  
  width: 20rem;
  margin: -4rem auto 0 auto;
  padding: 1rem;
  
  background: #fff;
  
  border-radius: rem(2);
  box-shadow: 0 rem(2) rem(5) 0 rgba(0, 0, 0, 0.25);
}

.list {
  margin: .5rem;  
}

.list__item {
  margin: 0 0 .5rem 0;
  padding: 0;
}

.label--checkbox {
  position: relative;

  margin: .5rem;
  
  font-family: Arial, sans-serif;
  line-height: 135%;
  
  cursor: pointer;
}

.checkbox {
  position: relative;
  top: rem(-6);
  
  margin: 0 1rem 0 0 ;
  
  cursor: pointer;
  
  &:before {
        @include transition(all .3s ease-in-out);
    
        content: "";
    
        position: absolute;
        left: 0;
        z-index: 1;
  
        width: 1rem;
        height: 1rem;
    
        border: 2px solid #f2f2f2; 
  }
  
  &:checked {
    &:before {
       @include transform(rotate(-45deg));
  
        height: .5rem;
  
        border-color: $green;
        border-top-style: none;
        border-right-style: none;
    } 
  }
  
  &:after {
    content: "";
    
    position: absolute;
    top: rem(-2);
    left: 0;
    
    width: 1.1rem;
    height: 1.1rem;
    
    background: #fff;
    
    cursor: pointer;
  }
}

.button--round { 
  @include transition(.3s background ease-in-out);
  
  width: 2rem;
  height: 2rem;
  
  background: $blue;
  
  border-radius: 50%;
  box-shadow: 0 rem(2) rem(5) 0 rgba(0, 0, 0, 0.25);
  
  color: #fff;
  text-decoration: none;
  text-align: center;
  
  i {
    font-size: 1rem;
    line-height: 220%;
    vertical-align: middle;
  }
  
  &:hover {
    background: $blueDark;
  }
}

.button--sticky {
  position: fixed;
  right: 2rem;
  top: 16rem;
}

%slide-up {
  -webkit-animation-duration: $slideDuration;
  animation-duration: $slideDuration;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(rem($slideDistance));
    transform: translateY(rem($slideDistance));
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideUp {
  0% {
    -webkit-transform: translateY(rem($slideDistance));
    transform: translateY(rem($slideDistance));
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}