Angular 获取角度素描中多个复选框的值 要从多个复选框中获取值 每一行由用户名和授予用户的权限（即读、写）组成 在下面的代码中，我试图授予用户ie读、写权限 对于UI，我使用了“启动”复选框 检查时，需要将读取的值添加到用户数组中

应用程序组件.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: []}
    ]


  }
}

从'@angular/core'导入{Component，OnInit}；
从“@angular/animations/browser/src/render/web_animations/web_animations_driver”导入{supportsWebAnimations}”；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.scss']
})
导出类AppComponent实现OnInit{
用户：阵列；
权限：数组=[]；
恩戈尼尼特（）{
此文件的用户数=[
{id:1，名称：'Sam'，权限：[]}，
{id:2，名称：'Adam'，权限：[]}，
{id:3，名称：'Chris'，权限：[]}
]
}
}

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>

权限
名称
阅读
写
{{user.name}

您的模型中必须有这些读/写标志，并将它们连接到适当的复选框。乙二醇

this.users = [
  {id: 1, name: 'Sam', permission: {read:false,write:false}},
  {id: 2, name: 'Adam', permission: {read:false,write:false}},
  {id: 3, name: 'Chris', permission: {read:false,write:false}}
]

及

{{user.name}

---

模型中的值将根据复选框状态相应地切换为真/假。至少我会这样做。

您可以维护

权限

对象并将其绑定到您的复选框中，而不是维护

权限

数组

在这种情况下，不需要维护索引

您的代码如下所示：

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}}
    ]
  }

} 

从'@angular/core'导入{Component，OnInit}；
从“@angular/animations/browser/src/render/web_animations/web_animations_driver”导入{supportsWebAnimations}”；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
users:Array here
单击复选框后在users数组中获取null。输出为[{“id”：1，“name”：“Sam”，“permission”：{“read”：[null]，“write”：false}}，{“id”：2，“name”：“Adam”，“permission”：{“read”：[null]，“write”：false}，{“id”：3，“name”：“Chris”，“permission”：{“read”：[null]，“write”：false}]看起来Priming复选框需要
binary=“true”
才能工作。感谢@Asim Hashmi，可以使用Priming来完成，因为在演示Priming复选框中。再次感谢@Asim Hashmi，现在它工作得很好。
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}}
    ]
  }

} 

<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>