javascript - 单击隐藏的单选按钮在 Angular 9 中不起作用

Question

我在 div 中使用了具有以下样式的单选按钮(通过单击 div 来选择它):

.plans-list {
  display: flex;
  justify-content: center;
  margin: 2rem 0;

  .plan {
    display: flex;
    margin: 0 0.5rem;
    position: relative;

    &:hover {
      ::ng-deep .card {
        cursor: pointer;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
          0 2px 10px 0 rgba(0, 0, 0, 0.12);
      }
    }

    &__type {
      display: block;
      width: 100%;
      height: 100%;
      visibility: hidden;
      position: absolute;
      z-index: 2;
    }
  }
}

<div class="plans-list">
        <div class="plan" *ngFor="let plan of planTypes">
            <input (click)="calculateTotal()" class="plan__type" type="radio" name="planType" [value]="plan.value"
                formControlName="planType" #planType>
            <app-plan-item [type]="plan.title" [active]="planType.checked" [params]="planParameters">
            </app-plan-item>
        </div>
    </div>

单击单选按钮不起作用，active 类不会分配给 app-plan-item 元素!怎么了？

演示:https://stackblitz.com/edit/angular-ahw2bf?file=src%2Fapp%2Fapp.component.css

Answer 1

将 CSS 可见性更改为不透明度 https://stackblitz.com/edit/angular-5v457f

.plan__type {
      display: block;
      width: 100%;
      height: 100%;
      opacity:0; 
      position: absolute;
      z-index: 2;
    }