角度2のテーブルの各行にangular2-selectを追加する方法。

Question

テーブルの各行にチェックボックスを追加し、angular2を持つ各行も選択します。最初の行と2番目の行を確認しました。最初の行のangular2 selectから選択します。最初の行の選択したオプションを、 angular2 select.Butそれは選択されたチェックされた行のangular2 selectを更新していません。

私はしてください2つの行をチェックし、最初のNGセレクトの「kray」の値を選択するが、それは第2列NG-select.Theを更新していない第2のNG-SELCT選択された値が「kray」

する必要があります助けて。ここで

私のコードは、JSON

{ 
    [{ 
     "clientCode": "NIKE", 
     "carrierCode": "FDE", 
     "auditDeadlineDate": "11/11/2016", 
     "assignee": "Flansdon", 
    }, { 
     "clientCode": "NIKE", 
     "carrierCode": "FDE", 
     "auditDeadlineDate": "05/29/2017", 
     "assignee": "Flansdon" 
    },{ 
     "clientCode": "NIKE", 
     "carrierCode": "FDE", 
     "auditDeadlineDate": "06/01/2017", 
     "assignee": "Flansdon" 
    }], 
} 

mydata.tsあなたは、ネストされたcomponensを使用する必要があり、この入力用

onSingleSelectedManager1(item,index) { 
    console.log("This is Index",index); 
    for(let i=0;i<this.checkedArray.length;i++){ 
     this.checkedArray[i].assignee = item.label; 
    } 
    } 

Answer 1

の下にファイル

<tbody class="set-font"> 
    <tr [class.info]="tr.status" 
     *ngFor="let tr of activeTabData let i = index" class="tros-auditors"> 
     <td scope="row"> 
     <input type="checkbox" value={{tr.id}} 
      class="checkedauditors" 
      id={{tr.checkboxId}} 
      (click)="toggleCheck(tr,i)" 
      [(ngModel)]="tr.status" 
      ></td> 
      <td>{{tr.clientCode}}</td> 
      <td>{{tr.carrierCode}}</td> 
      <td><div><my-date-picker [options]="myDatePickerOptions" id={{i}} 
       (dateChanged)="onDateChanged($event)" 
       [selDate]="selectedDate" 
       > 
       </my-date-picker> 
       </div> 
     </td> 
     <td [formGroup]="form"> 
     <ng-select id={{i}} 
      [options]="optss" 
      placeholder="{{tr.assignee}}" 
      formControlName="selectSingle" 
      (opened)="onSingleOpened1(i)" 
      (closed)="onSingleClosed1()" 
      (selected)="onSingleSelectedManager1($event,i)" 
      [(ngModel)]="hideSelectedAuditor" 
      (deselected)="onSingleDeselected($event)"> 
     </ng-select> 
     </td> 
    </tr> 
    </tbody> 

ですt。

このコンポーネントでは、クリックイベントによって親コンポーネントにデータを戻す必要があります。

は、私が何を意味するかをお見せする小さなアプリケーションを設定

test.component.ts（親）

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-test', 
    templateUrl: './test.component.html', 
    styleUrls: ['./test.component.css'] 
}) 
export class TestComponent implements OnInit { 
data: any= 
    [{ 
     "ID":1, 
     "clientCode": "NIKE", 
     "carrierCode": "FDE", 
     "auditDeadlineDate": "11/11/2016", 
     "assignee": "Flansdon", 
    }, { 
     "ID":2, 
     "clientCode": "NIKE", 
     "carrierCode": "FDE", 
     "auditDeadlineDate": "05/29/2017", 
     "assignee": "Flansdon" 
    },{ 
     "ID":3, 
     "clientCode": "NIKE", 
     "carrierCode": "FDE", 
     "auditDeadlineDate": "06/01/2017", 
     "assignee": "Flansdon" 
    }] 


    constructor(){} 

    ngOnInit() { 

    } 

    Output(event){ 
     console.log(event) 
    } 

} 

test.component.html

<tr *ngFor="let tr of data"> 
    <td>{{tr.clientCode}}</td> 
    <td>{{assignee}}</td> 
    <td> 
    <app-count [id]="tr.ID" (output)='Output($event)'></app-count> 
     </td> 
</tr> 

count.component .ts（子供）

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'app-count', 
    templateUrl: './count.component.html', 
    styleUrls: ['./count.component.css'] 
}) 
export class CountComponent implements OnInit { 
    @Input() id: any 
    @Output() output: EventEmitter<any> = new EventEmitter<any>() 

    count: any 
    constructor() { } 

    ngOnInit() { 
    console.log(this.id) 
    } 
    onClick(id) { 
    var o: any = { id: id, count: this.count } 
    this.output.emit(o) 

    } 
} 

count.component.html

<select [(ngModel)]="count" (click)='onClick(id)'> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

この場合、IDと選択肢のあるオブジェクトが返されます。

機能出力に、あなたはまた、ネストされたコンポーネントについては、この記事を読むことができ

魔法

Nested Components

Answer 2

HTML行うことができます。

<ng-select [(ngModel)]="count" (click)='onClick(id)' 
    [options]="optss"> 
</ng-select> 

TS：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'app-count', 
    templateUrl: './count.component.html', 
    styleUrls: ['./count.component.css'] 
}) 
export class CountComponent implements OnInit { 
    @Input() id: any 
    @Output() output: EventEmitter<any> = new EventEmitter<any>() 

    count: any 
    optss: any[] = [ 
    { value: 'test1', label: 'test1' }, 
    { value: 'test2', label: 'test2' }, 
    { value: 'test3', label: 'test3' } 
    ] 


    constructor() { } 

    ngOnInit() { } 

    onClick(id) { 
    var o: any = { id: id, count: this.count } 
    this.output.emit(o) 

    } 
} 

を