0
テーブルインターフェイスを使用して「テスト」で実行するアクションをユーザーが選択できるようにするコンポーネントを作成しようとしています。テーブルの各行は、別々の子コンポーネントであり、親コンポーネントはテーブルヘッダーと子コンポーネント行から成り、子コンポーネントの行は*ngForで作成されます。Angular2親コンポーネントが子コンポーネントのイベントをトリガーしない
すべての子コンポーネントのチェックボックスをチェックするにはヘッダーのチェックボックスが必要で、ヘッダーの選択されたオプションと等しい子コンポーネントすべてを選択するヘッダーの選択が必要です。チェックボックスは（Plunkerでデモされたように）動作するように見えますが、ヘッダーチェックボックスをオンにすると、親コンポーネントのイベントハンドラは更新されたチェック値を取得せず、実際の行のチェックボックスをオンにしたときに行います。デモにはコンソールに印刷するためのチェックボックスがあります。ヘッダーチェックボックスがチェックボックスのすべてのチェックされたイベントをトリガーし、複数のステートメントをコンソールに出力することを期待しています（テーブル行ごとに2行）。
ヘッダーの選択変更を処理するために部分を配置し始めましたが、オプションが入力されたときに選択肢のオプションを選択する方法が少し残っています。*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);
}
}