11

こんにちは: 私はコンポーネントを持っています。コンポーネント ビューにはテーブルがあります。

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

*ngFor を使用して生成されたテーブル ビューの画像へのリンクを次に示します。

ビジネスロジックは、「削除ボタンをクリックすると、チェックされたすべての受信者を削除する必要があります」です。削除関数にパラメーターを渡したい (これは、チェック済みの受信者 ID を含む配列である必要があると思います)

ここに私のコンポーネントコードがあります:

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");
}


}

これを達成する方法を知りたいです。

乾杯

4

3 に答える 3

11

selectedプロパティを受信者に追加します。チェックボックスの変更で、それをtrueにします。

ユーザーが [すべての受信者を削除] をクリックしたら、選択された受信者のリストをフィルタリングするだけです。

このようなもの：

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

そしてコンポーネント：

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;
    }
}
于 2016-01-28T09:17:59.050 に答える
2

「受信者」モデルにもう 1 つのプロパティを追加できれば、選択したレコードを簡単に追跡できます。

受信者モデルに「選択された」プロパティを追加し、チェックボックスを選択されたプロパティに双方向バインドします。

<input #{{rp.id}}  type="checkbox" [(ngModel)]="rp.selected">

コンポーネントにメソッドを追加して、選択したすべてのレコードを取得します

private getSelected() {
    return this.arrAll.filter((item) => item.selected);
}

次に、選択したレコードを取得します

deleteRecipients() {  
    console.log(this.getSelected());
}
于 2016-01-28T09:21:52.727 に答える
0

チェックボックスをチェックしたときにトリガーされる関数をコントローラーに追加します（チェックボックスのng-click）。チェックボックスの値に応じて、チェックされているかチェックされていないかがわかります。チェックされた受信者のリストの別のモデルを維持します。チェックされている場合は受信者をリストに追加し、チェックされていない場合は削除します。delete を呼び出すと、そのモデル内のものを削除するだけですか?

于 2016-01-28T09:05:42.470 に答える