Как показать элемент div, если флажок установлен?

Question

Я пытаюсь отобразить элемент div, если флажок установлен с помощью ng-show. Если у пользователя нет номера телефона, он устанавливает флажок, и должен появиться элемент ввода, где он может ввести свой почтовый адрес. Однако переключение между проверенными и непроверенными значениями в настоящий момент не имеет никакого эффекта.

Я сделал двухстороннее связывание для элемента.

- Мой файл 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

С угловым, вы должны использовать 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 2

Вы просто должны использовать директиву *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
    ) {  }
}

Answer 3

Добро пожаловать в сообщество.

ng-show является директивой структуры angularJS.

В Angular (обратите внимание на заглавную 'A') мы используем директиву ngIf следующим образом:

<div *ngIf="person.myCheckbox">