如果選中復選框，如何顯示div元素？

Question

如果使用ng-show檢查復選框，我正在嘗試顯示div元素。 如果用戶沒有電話號碼，他們會選中復選框，並且輸入元素應顯示在他們可以輸入郵寄地址的位置。 但是，在已檢查和未檢查的值之間切換目前沒有任何效果。

我已經對元素進行了雙向綁定。

- 我的component.html文件 -

<input type="checkbox" name="myCheckbox" [(ngModel)]="person.myCheckbox">
I don't have a telephone
<div ng-show="person.myCheckbox">
   Show when checked (telephone input)
</div>

- Person.ts文件 -

export class Person {

        constructor(
            public myCheckbox: boolean
        ) {  }
    }

Answer 1

歡迎來到社區。

ng-show是angularJS框架的指令。

在Angular中（注意大寫'A'）我們使用ngIf指令，如下所示：

<div *ngIf="person.myCheckbox">

Answer 2

使用angular，您應該使用ngIF

<div *ngIf="person.myCheckbox">

但你可以用CSS做到這一點。

 [name="myCheckbox"] + div { display: none; } [name="myCheckbox"]:checked + div { display: block; } 

 <input type="checkbox" name="myCheckbox" [(ngModel)]="person.myCheckbox"> I don't have a telephone <div> Show when checked (telephone input) </div> 

Answer 3

您只需使用*ngIf指令即可。

- 您的component.html文件 -

<input type="checkbox" name="myCheckbox" [(ngModel)]="person.myCheckbox">
I don't have a telephone
<div *ngIf="person.myCheckbox">
   Show when checked (telephone input)
</div>

- Person.ts文件 -

export class Person {
    constructor(
        public myCheckbox: boolean
    ) {  }
}