Question

我正在开发angular2应用程序。在我的要求是使用数组创建多个复选框，并选中最后一个复选框，如果未选中最后一个复选框，则显示div，所以隐藏div。

Component.ts： -

User-Defined Table Types

component.html

peoples: any = [
 { "name":"rahul", "status":false},
 { "name":"rija", "status":false},
 { "name":"roy", "status":false},
 { "name":"ninja", "status":false},
 { "name":"riya", "status":false},
 { "name":"rohit", "status":true},
];

Answer 1

你可以这样做：

checked

在上面的代码示例中，如果最后一个元素为true（如果状态为div），则显示以下<div *ngFor = "let people of peoples;let i = index;"> <input type = "checkbox" [value] = 'people?.name' [checked] = "people?.status" (change)="cahngeStatus(i)"> {{people?.name}} </div> <div *ngIf="peoples[5].status"> <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span> </div>。

修改

将HTML更改为：

cahngeStatus(index) { peoples[index].status = !peoples[index].status; }

将以下功能添加到js：

ngModel

我们也可以通过导入FormsModule
来使用.find
希望这会有所帮助：）

Answer 2

就像pardeep jain指出的那样，你可以使用

[hidden]="!peoples[peoples.length - 1].status"

但我只想提及，然后使用ngModel，使用时，您也可以在使用时删除[checked]。

<div *ngFor="let people of peoples">
   <input type="checkbox" [value]="people.name" [(ngModel)]="people.status">
   {{people?.name}}
</div>


<div [hidden]="peoples[peoples.length - 1].status">
  <span> Lorem Ipsum is simply dummy text </span>
</div>

如果在angular2中选中/取消选中最后一个复选框，如何显示/隐藏div？

2 个答案: