Question

我在表格的每一行都添加了复选框，并且每行都有angular2选择。我检查了第一行和第二行。然后我从第一行中选择了angular2 select.I想要第一行的选定选项应该更新到所有选中的行angular2 select.But它没有更新选中选中的行angular2 select。

我检查了两行并选择＆＃34; kray＆＃34;第一个ng-select的值，但它没有更新第二行ng-select。第二个ng-selct选择的值应该是＆＃34; kray＆＃34;

请帮帮我。

这是我的代码

<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（parent）

    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（child）

    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)

  }
}

如何在angular2.Each行中具有复选框的每一行中添加angular2-select。

2 个答案: