Получить значение множественного флажка в угловом прайменге

Question

• Хотите получить значение из нескольких флажков.
• Каждая строка состоит из имени пользователя и разрешений, предоставленных пользователю, т.е. чтения, записи.
• В следующем коде я пытаюсь дать разрешение пользователю, т.е. читать, писать.
• для интерфейса пользователя используется флажок 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>

Answer 1

Вместо поддержки массива permission вы можете поддерживать объект 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

Вам нужно добавить

двоичная = "истина"

атрибут вашего флажка

Вы можете увидеть демо здесь

Answer 2

Вы должны иметь эти флаги чтения / записи в вашей модели и подключать их к соответствующим флажкам. например,

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

и

<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  [(ngModel)]="user.permissions.read" inputId="R"></p-checkbox></div> 
    <div  class="ui-g-2"><p-checkbox  [(ngModel)]="user.permissions.write" inputId="W"></p-checkbox></div>
</div>

значения в модели будут переключаться соответственно на true / false в зависимости от состояния флажка. По крайней мере, так я бы это сделал.