Angular2-将检查的值推送到检查时的数组 [英] Angular2 - Push checked value to array on check

问题描述

我有一个接收员工记录对象并将其显示在表格中的组件.每个记录都有一个复选框，使您可以选择"要包含在下一个流程中的员工.

<tr *ngFor="let i of importResults" >
 <td>
  <input type="checkbox"
         value="{{ i.QID }}"
         attr.data-employeename="{{ i.PreferredName }} {{ i.LastName }}"
         [checked]="isSelected" />
  </td>
  <td>{{ i.PreferredName }} {{ i.LastName }}</td>
</tr>

在此组件中，我创建了一个数组selectedEmployees = [];，我的目标是当我单击一个复选框时，其值会被推送到该数组，而当我取消选中它时，该值也会从数组中删除./p>

我尝试对2 way binding使用ngModel，但是由于该数据在对象中没有初始检查值，因此我无法使其正常工作.

ngModel是实现这一目标的最佳方法吗?也许我只是以错误的方式来做.

我尝试遵循此问题，但打字稿扔了一个错误提示.entries无效.可能是较旧版本的angular的吗?

解决方案

您可以将click事件添加到复选框，并将其传递给处理添加或删除的函数.

html:

<div *ngFor="let i of importResults" >
 <div>
  <input type="checkbox"
         value="{{ i.QID }}"
         (click)="change(i)"/>
   <span>{{ i.PreferredName }} {{ i.LastName }}</span>
  </div>
</div>

<p> Selected Employee: {{selectedEmployees | json}} </p>

component.ts:

export class SelectFormExample {
  selectedEmployees = [];

  showSiblingComp = false;

  importResults = [
    {QID: "1", PreferredName: 'Steak', LastName: "Pizza"},
    {QID: "2", PreferredName: 'Cheese', LastName: "Burger"},
    {QID: "3", PreferredName: 'Chicken', LastName: "Panini"}
  ];

  constructor(private service: SharedService){

  }

  change(obj){

    let updateItem = this.selectedEmployees.find(this.findIndexToUpdate, obj.QID));

    let index = this.selectedEmployees.indexOf(updateItem);

    console.log(index);

    if(index > -1){
      this.selectedEmployees.splice(index, 1);
    }
    else{
      this.selectedEmployees.push(obj);
    }

    this.service.setList(this.selectedEmployees);

  }

  findIndexToUpdate(obj) { 
        return obj.QID === this;
  }
}

演示

我已经扩展了演示，包括通过共享服务与同级组件共享selectedEmployees.

I have a component that receives an object of employee records and displays them in a table. Each record has a checkbox that allows you to "select" the employee to be included in the next process.

<tr *ngFor="let i of importResults" >
 <td>
  <input type="checkbox"
         value="{{ i.QID }}"
         attr.data-employeename="{{ i.PreferredName }} {{ i.LastName }}"
         [checked]="isSelected" />
  </td>
  <td>{{ i.PreferredName }} {{ i.LastName }}</td>
</tr>

In this component, I created an array selectedEmployees = []; and my goal is that when I click a checkbox, its value is pushed to the array, as well as when I uncheck it, the value is removed from the array.

I tried using ngModel for 2 way binding but because this data doesn't have an initial checked value in the object, I wasn't able to get that working correctly.

Is ngModel the best way to achieve this? Perhaps I was just going about it the wrong way.

I tried following this question but typescript threw an error saying .entries was not valid. It may have been for an older version of angular?

解决方案

You can add a click event to the checkbox and pass it to a function to handle add or remove.

html:

<div *ngFor="let i of importResults" >
 <div>
  <input type="checkbox"
         value="{{ i.QID }}"
         (click)="change(i)"/>
   <span>{{ i.PreferredName }} {{ i.LastName }}</span>
  </div>
</div>

<p> Selected Employee: {{selectedEmployees | json}} </p>

component.ts:

export class SelectFormExample {
  selectedEmployees = [];

  showSiblingComp = false;

  importResults = [
    {QID: "1", PreferredName: 'Steak', LastName: "Pizza"},
    {QID: "2", PreferredName: 'Cheese', LastName: "Burger"},
    {QID: "3", PreferredName: 'Chicken', LastName: "Panini"}
  ];

  constructor(private service: SharedService){

  }

  change(obj){

    let updateItem = this.selectedEmployees.find(this.findIndexToUpdate, obj.QID));

    let index = this.selectedEmployees.indexOf(updateItem);

    console.log(index);

    if(index > -1){
      this.selectedEmployees.splice(index, 1);
    }
    else{
      this.selectedEmployees.push(obj);
    }

    this.service.setList(this.selectedEmployees);

  }

  findIndexToUpdate(obj) { 
        return obj.QID === this;
  }
}

demo

I have extended the demo to include sharing the selectedEmployees with a sibling component via shared service.

这篇关于Angular2-将检查的值推送到检查时的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！