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

对于有角度的，您应该使用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
    ) {  }
}

如果选中复选框，如何显示div元素？

3 个答案: