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

Question

我在表格的每一行中添加了复选框，并且每一行都有 angular2 选择。我检查了第一行和第二行。然后我从第一行的 angular2 选择中进行选择。我希望第一行的选定选项应该更新为全部选中行 angular2 选择。但它没有更新选中的行 angular2 选择。

我检查了两行并选择了第一个 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

对于此输入，您应该使用嵌套组件。

在这个组件中，你应该通过点击事件将数据返回给父组件。

我设置了一个小应用程序来告诉你我的意思

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)

  }
}