禁用 div 並僅在選擇單選按鈕選項時啟用

Question

如何僅在選擇單選按鈕選項后禁用 div 並激活它？

I can hide with hidden and show div when an option is selected, but hidden is not the desired property.

有誰知道可能的解決方案？

<div class="col-s" [hidden]="show">

onValueChanged(c){
    if(c!=null){
      this.id= c.value.ID;
      this.show=false;
    }

  }

Answer 1

你可以用*ngIf="show" 。

<div class="col-s" *ngIf="show">

onValueChanged(c) {
  if(c! = null) {
    this.id = c.value.ID;
    this.show = false;
  }
}

Answer 2

您可以設置pointer-events: none以防止單擊。

組件 html

<div class="col-s" [ngStyle]="{'pointer-events': !show ? 'none' : 'initial' }">
  this button is only clickable if you choose -> show
  <button>click</button>
</div>

<label for="showtrue">show</label>
<input id="showtrue" type="radio" name="show" [value]="true" [(ngModel)]="show">

<br />

<label for="showfalse">dont't show (not clickable)</label>
<input id="showfalse" type="radio" name="show" [value]="false" [(ngModel)]="show">

組件 ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // if you want initial false, change it here
  show = true; // initial true (div is clickable)
}

如果show為真，您可以點擊。 如果它是假的，你不能。

---

編輯：這是一個例子，它是如何工作的： https://ng-run.com/edit/Kzn3ChvHWUD4Jxn1cc2r