如何动态绑定复选框 Angular 2 的值 [英] How to dynamically bind the value of a checkbox Angular 2

问题描述

大家好:我有一个组件.组件视图有一个表:

<h2>收件人列表</h2><br><table class="table table-striped"><头><tr><th>Id</th><th>姓名</th><th>电话</th><th>状态</th><th>选择</th></tr></thead><tr *ngFor="#rp of arrAll"><td>{{rp.id}}</td><td>{{rp.name}}</td><td>{{rp.phone}}</td><td>{{rp.isActivated?'Active':'Inactive'}}</td><td><input #{{rp.id}} type="checkbox" (change)="checkbox(value)"></td></tr></tbody><button class="btn btn-success" (click)="newRecipient()">新收件人</button><button class="btn btn-danger pull-right" (click) ="deleteRecipients()">Delete Recipients</button>

这是使用生成的 表格视图 图像的链接*ngFor.

业务逻辑是当点击删除按钮时，必须删除所有选中的收件人".我想将一个参数传递给我的删除函数(我认为它应该是一个包含已检查收件人 ID 的数组)

这是我的组件代码:

import {Component} from 'angular2/core';从'angular2/common'导入{CORE_DIRECTIVES}；从'angular2/router'导入{路由器，RouteParams}；从'../../services/recipients/recipients.service'导入{RecipientsService}；从'../../models/recipient/recipient'导入{Recipient}；@成分({选择器:收件人列表视图"，templateUrl: './app/components/recipient-list-view/recipient-list-view.html',styleUrls: ["./app/components/recipient-list-view/style.css"]})导出类 RecipientListViewComponent {arrAll: 收件人[];构造函数(私有接收者服务:接收者服务，参数:RouteParams，私有路由器:路由器){this.arrAll = receiversService.getAll();}新收件人(){this.router.navigate(['../NewRecipient']);}deleteRecipients() {//需要知道检查了哪些收件人console.log("删除");}}

我想知道如何实现这一点.

干杯

解决方案

向收件人添加属性 selected.在复选框更改上，将其设为 true.

一旦用户单击删除所有收件人，只需过滤已选择的列表即可.

像这样:

<h2>收件人列表</h2><br><table class="table table-striped"><头><tr><th>Id</th><th>姓名</th><th>电话</th><th>状态</th><th>选择</th></tr></thead><tr *ngFor="#rp of arrAll"><td>{{rp.id}}</td><td>{{rp.name}}</td><td>{{rp.phone}}</td><td>{{rp.isActivated?'Active':'Inactive'}}</td><td><input #{{rp.id}} [(ngModel)]="rp.selected" type="checkbox" (change)="checkbox(rp)"></td></tr></tbody><button class="btn btn-success" (click)="newRecipient()">新收件人</button><button class="btn btn-danger pull-right" (click) ="deleteRecipients()">Delete Recipients</button>

和组件:

导出类 RecipientListViewComponent {arrAll: 收件人[];构造函数(私有接收者服务:接收者服务，参数:RouteParams，私有路由器:路由器){this.arrAll = receiversService.getAll();}新收件人(){this.router.navigate(['../NewRecipient']);}deleteRecipients() {//需要知道检查了哪些收件人让selected = this.arrAll.filter((x) => x.selected)控制台日志(已选择)；}复选框(收件人){收件人.选定 = (收件人.选定) ?假:真；}}

Hi all: I have a component. The component view has a table:

<div class="container">
<h2>Recipients List</h2>
<br>
<table class="table table-striped">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Phone</th>
            <th>Status</th>
            <th>Select</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="#rp of arrAll">   
            <td>{{rp.id}}</td>             
            <td>{{rp.name}}</td>
            <td>{{rp.phone}}</td>                
            <td>{{rp.isActivated?'Active':'Inactive'}}</td>             
            <td>
                <input #{{rp.id}}  type="checkbox" (change)="checkbox(value)">
            </td>
        </tr>          
    </tbody>
</table>

<button class="btn btn-success" (click)="newRecipient()">New Recipient</button>
<button class="btn btn-danger pull-right" (click) ="deleteRecipients()">Delete Recipients</button>

Here is a link to an image of the table view which was generated using *ngFor.

The business logic is "When the delete button is clicked all the checked recipients must be deleted". I want to pass a parameter to my delete function (which I think should be an array containing the checked recipient ids)

Here is my component code:

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';
import { Router, RouteParams } from 'angular2/router';
import {RecipientsService}    from'../../services/recipients/recipients.service';
import {Recipient} from '../../models/recipient/recipient';

@Component({
selector: 'recipient-list-view',
templateUrl: './app/components/recipient-list-view/recipient-list-view.html',
styleUrls: ["./app/components/recipient-list-view/style.css"]
})

export class RecipientListViewComponent {

arrAll: Recipient[];

constructor(private recipientsService: RecipientsService, params:    RouteParams, private router: Router) {
    this.arrAll = recipientsService.getAll();        
}

newRecipient() {
    this.router.navigate(['../NewRecipient']);
}

deleteRecipients() {  //need to know which recipients are checked

    console.log("delete");
}


}

I would like to know how to achieve this.

Cheers

解决方案

Add a property selected to your recipient. On the checkbox change, put it as true.

Once the user clicks delete all recipients, just filter the list for the ones who are selected.

Something like this:

<div class="container">
    <h2>Recipients List</h2>
    <br>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Phone</th>
                <th>Status</th>
                <th>Select</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="#rp of arrAll">   
                <td>{{rp.id}}</td>             
                <td>{{rp.name}}</td>
                <td>{{rp.phone}}</td>                
                <td>{{rp.isActivated?'Active':'Inactive'}}</td>             
                <td>
                    <input #{{rp.id}}  [(ngModel)]="rp.selected" type="checkbox" (change)="checkbox(rp)">
                </td>
            </tr>          
        </tbody>
    </table>

    <button class="btn btn-success" (click)="newRecipient()">New Recipient</button>
    <button class="btn btn-danger pull-right" (click) ="deleteRecipients()">Delete Recipients</button>
</div>

And the component:

export class RecipientListViewComponent {

     arrAll: Recipient[];

     constructor(private recipientsService: RecipientsService, params: RouteParams, private router: Router) {
        this.arrAll = recipientsService.getAll();        
    }

    newRecipient() {
        this.router.navigate(['../NewRecipient']);
    }

    deleteRecipients() {  //need to know which recipients are checked
        let selected = this.arrAll.filter((x) => x.selected)
        console.log(selected);
    }

    checkbox(recipient) {
        recipient.selected = (recipient.selected) ? false : true;
    }
}

这篇关于如何动态绑定复选框 Angular 2 的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！