如何在angular2的表的每一行中添加angular2-select。每行都有復選框。

Question

我在表格的每一行中添加了復選框，並且每一行也具有angular2 select。我檢查了第一行和第二行。然后我從第一行的angular2 select中進行選擇。我希望第一行的所選選項應該更新為所有選中的行angular2 select但是，它不會更新選中檢查的行angular2 select。

我檢查了兩行並選擇了第一個ng-select的“ kray”值，但它沒有更新第二行ng-select。第二個ng-selct選擇的值應該是“ kray”

請幫我。

這是我的代碼

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

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

  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

對於此輸入，您應該使用嵌套componenst。

在此組件中，您應該通過click事件將數據返回給父組件。

我設置了一個小應用程序來向您展示我的意思

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和select選項的對象。

在功能輸出中，您可以做魔術

您還可以閱讀有關嵌套組件的本文

嵌套組件

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)

  }
}