Angular2父組件不會觸發子組件的事件

Question

我正在嘗試創建一個組件，該組件允許用戶使用表界面選擇要在“測試”上執行的動作。 表的每一行都是一個單獨的子組件，其父組件包括表頭和子組件行，它們是使用*ngFor創建的。

除了我需要標題中的復選框以檢查所有子組件復選框以及標題中的select來選擇所有子組件以使其等於標題中的所選選項之外，其他所有東西都運行良好。 復選框看起來像是可以工作的（如在Plunker中所演示的），但是當選中標頭復選框時，父組件中的事件處理程序不會獲取更新后的選中值，而當選中實際行的復選框時，事件處理程序不會。 該演示具有將內容打印到控制台的復選框。 我希望標題復選框觸發所有復選框的“ checked”事件，並將多個語句打印到控制台（每表行兩行）。

我開始將各部分放置到適當的位置以處理標題的選擇更改，但是對於在使用*ngFor填充選項時如何使選擇的選項處於選中狀態有些*ngFor 。

我不知道這是否重要，但是我正在使用angular2-beta 15，並在可能的情況下嘗試保留該版本。

柱塞和代碼轉儲在下面。

import {Component, EventEmitter, Output, Input} from 'angular2/core'

// Child Component
@Component({
selector: 'tbody',
template: `
    <td>{{ test }}</td>
    <td>
      <select (change)="selectedActionChange($event)">
        <option *ngFor="#opt of optionList">{{ opt }}</option>
      </select>
    </td>
    <td class="center">
      <input type="checkbox" [ngModel]="checkboxValue" (ngModelChange)="checkboxChanged($event)" />
    </td>
`
})

export class ChildComponent {
  @Input() test: string;
  @Input() checkboxValue: boolean;
  @Input() selectedAction: string;
  @Output() action: EventEmitter<any> = new EventEmitter();
  @Output() checked: EventEmitter<any> = new EventEmitter();
  optionList: Array<string> = ["Add", "Replace", "Skip"];

  selectedActionChange(event) {
    this.action.emit({
      value: event.srcElement.value,
      test: this.test
    });
  }

  checkboxChanged(event: any) {
        this.checked.emit({
        value: event,
        test: this.test
    });
  }

}

// Parent Component
@Component({
    selector: 'parent',
    template: `
        <table>
          <thead>
            <tr>
              <th>Test Name</th>
              <th>
                <label>Action</label>
                <br />
               <select (change)="headerSelectChanged($event)">
                  <option *ngFor="#opt of optionList">{{ opt }}</option>
                </select>
              </th>
              <th>
                <label>Import Test</label>
                <br />
                <input type="checkbox" checked (change)="headerCheckboxChanged($event)"/>
          </th>
        </tr>
      </thead>
      <tbody *ngFor="#test of testList" [test]="test" [checkboxValue]="masterCheckboxValue" [selectedAction]="masterSelectAction"
      (action)="actionChange($event)" (checked)="checkedChanged($event)"></tbody>
    </table>
`,
directives: [ChildComponent]
})

export class ParentComponent {
  testList: Array<string> = ["Test 1", "Test 2", "Test 3"];
  optionList: Array<string> = ["Add", "Replace", "Skip"];
  masterCheckboxValue: boolean = true;
  masterSelectAction: string;

  headerCheckboxChanged(event: any): void {
    this.masterCheckboxValue = event.srcElement.checked;
  }

  headerSelectChanged(event: any): void {
      this.masterSelectAction = event.srcElement.value;
  }

  actionChange(event: any) {
    console.log(event.test);
    console.log(event.value);
  }

  checkedChanged(event: any) {
    console.log(event.test);
    console.log(event.value);
  }
}

柱塞鏈接

Answer 1

這不是*ngFor的問題，而是防止parent <-> child通信中出現任何循環的問題。 我檢查了一下-這將為您提供幫助：將此代碼添加到您的子組件中，然后嘗試

 ngOnChanges(changes: SimpleChanges) {
  if (changes.checkboxValue) {
    this.checked.emit({
      value: changes.checkboxValue.currentValue,
      test: this.test
    });
  }
  if (changes.selectedAction) {
  ...
  }
 }

也許您必須導入和添加implements onChanges類，但這不是強制性的