- 想要从多个复选框中获取值。
- 每行包含用户名和授予用户的权限,即读、写。
- 在下面的代码中,我尝试授予用户 ie 读取、写入的权限。
- 对于 UI,我使用 primeng 复选框。
- 检查读取的值是否需要添加到用户数组中。
app.component.ts
import { Component, OnInit } from '@angular/core';
import { supportsWebAnimations } from '@angular/animations/browser/src/render/web_animations/web_animations_driver';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
users: Array<any>;
permissions: Array<any> = [];
ngOnInit(){
this.users = [
{id: 1, name: 'Sam', permission: []},
{id: 2, name: 'Adam', permission: []},
{id: 3, name: 'Chris', permission: []}
]
}
}
app.component.html
<h3 class="first">Permission</h3>
<div class="ui-g" style="margin-bottom:10px; ">
<div class="ui-g-2"><b>Name</b></div>
<div class="ui-g-2"><b>Read</b></div>
<div class="ui-g-2"><b>Write</b></div>
</div>
<div class="ui-g" style="margin-bottom:10px;" *ngFor ="let user of users; let i = index">
<div class="ui-g-2">{{user.name}}</div>
<div class="ui-g-2"><p-checkbox name="group[i]" value="Read" [(ngModel)]="permissions[i]" inputId="R"></p-checkbox></div>
<div class="ui-g-2"><p-checkbox name="group[i]" value="Write" [(ngModel)]="permissions[i]" inputId="W"></p-checkbox></div>
</div>
最佳答案
您可以维护一个permission
对象并将其绑定(bind)到您的复选框,而不是维护一个permission
数组。
在这种情况下,无需维护索引。
您的代码将如下所示:
import { Component, OnInit } from '@angular/core';
import { supportsWebAnimations } from '@angular/animations/browser/src/render/web_animations/web_animations_driver';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
users: Array<any>;
permissions: Array<any> = [];
ngOnInit(){
this.users = [
{id: 1, name: 'Sam', permission: { read: true, write: true}},
{id: 2, name: 'Adam', permission: { read: false, write: true}},
{id: 3, name: 'Chris', permission: { write: true, read: false}}
]
}
}
还有你的 HTML:
<h3 class="first">Permission</h3>
<div class="ui-g" style="margin-bottom:10px; ">
<div class="ui-g-2"><b>Name</b></div>
<div class="ui-g-2"><b>Read</b></div>
<div class="ui-g-2"><b>Write</b></div>
</div>
<div class="ui-g" style="margin-bottom:10px;" *ngFor ="let user of users; let i = index">
<div class="ui-g-2">{{user.name}}</div>
<div class="ui-g-2"><p-checkbox type="checkbox" name="group[i]" value="Read" [(ngModel)]="user.permission.read" inputId="R"></p-checkbox></div>
<div class="ui-g-2"><p-checkbox type="checkbox" name="group[i]" value="Write" [(ngModel)]="user.permission.write" inputId="W"></p-checkbox></div>
</div>
还有PrimeNG
您需要添加
binary="true"
归因于您的复选框
您可以看到demo这里
关于angular - 获取 Angular primeng中多个复选框的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56304918/