我正在尝试将我正在广播的数据从孩子发送到父母。这应该是整个表,但我得到的数据显然是未定义的。我想将这些数据发送到Home组件(一个数组,现在我只发送一个对象,我不知道如何正确执行,与box_data的形式完全相同,只是更改了“选中”形式)并保存作为
checkedTypeOfClient
参数,然后使用此数据过滤当前客户。
单击我想要在
checkedTypeOfClient
数组中接收的输入后 - 例如:
checkedTypeOfClient : IBox[] = [
{ name: "Producent", checked: false},
{ name: "Handel", checked: false },
{ name: "Simple", checked: true }
];
代码是 -
TypeOfClientComponent.ts
:
import { Component, EventEmitter, OnInit, Output } from "@angular/core";
import { FormArray, FormBuilder, FormGroup } from "@angular/forms";
@Component({
selector: "app-type-of-client",
templateUrl: "./type-of-client.component.html"
})
export class TypeOfClientComponent implements OnInit {
box_data: IBox[] = [
{ name: "Producent", checked: true },
{ name: "Handel", checked: true },
{ name: "Simple", checked: true }
];
@Output() typeOfClient = new EventEmitter<{}>();
form_model: FormGroup = this.fb.group({
search_text: this.fb.control(""),
boxes: this.fb.array(
this.box_data.map((box: IBox) => {
return this.fb.group({ checked: [box.checked], name: [box.name] });
})
)
});
constructor(private fb: FormBuilder) {}
get boxes() {
return this.form_model.get("boxes") as FormArray;
}
ngOnInit(): void {
this.form_model.valueChanges.subscribe(form_val => {
// const search_text = form_val.search_text;
this.typeOfClient.emit
(
// checked: form_val.checked,
// name: form_val.name
);
});
}
}
interface IBox {
name: string;
checked: boolean;
}
HTML
<form [formGroup]="form_model">
<ul formArrayName="boxes">
<li *ngFor="let box of boxes.controls; let i = index">
<label [formGroupName]="i">
{{ box_data[i].name }}
<input type="checkbox" formControlName="checked" />
</label>
</li>
</ul>
</form>
HomeComponent.ts
:
import {
Component,
OnInit,
enableProdMode,
Output,
EventEmitter
} from "@angular/core";
import { FormArray, FormBuilder, FormGroup } from "@angular/forms";
@Component({
selector: "app-home",
templateUrl: "./home.component.html",
styleUrls: ["./home.component.css"]
})
export class HomeComponent implements OnInit {
currentUser$BH: number;
currentSegments: string[];
checkedSegment: string[] = ["A", "B", "C", "D", "E", "F", "G"];
currentPH: string[];
checkedPH: string[] = [];
checkedTypeOfClient: IBox[] = [];
constructor(private fb: FormBuilder) {}
ngOnInit(): void {}
recieveCheckedTypeOfClient(typeClients: IBox[]) {
this.checkedTypeOfClient = [];
console.log("Give a data : ");
console.log(typeClients);
for (let index = 0; index < typeClients.length; index++) {
const element = typeClients[index];
this.checkedTypeOfClient.push(element);
}
console.log("Type of clients are :");
console.log(this.checkedTypeOfClient);
}
filterSegments() {}
recieveCheckedPH(e) {
console.log(e);
if (e.isChecked === true) {
this.checkedPH.push(e.ph);
} else {
let i = this.checkedPH.indexOf(e.ph);
if (i != -1) {
this.checkedPH.splice(i, 1);
}
}
console.log(this.checkedPH);
}
filterClients() {}
}
interface IBox {
name: string;
checked: boolean;
}
HTML
<div class="management">
<li class="filterClientButton" (click)="filterClients()">Filtruj klientów</li>
<app-type-of-client (typeOfClient)="recieveCheckedTypeOfClient($event)"></app-type-of-client>
</div>
在
TypeOfClientComponent.ts
中,减速@Output() typeOfClient = new EventEmitter<{}>();
是错误的,因为它的写入类型不是对象而是对象数组。正确的减速是,
@Output() typeOfClient = new EventEmitter<[]>();
或
@Output() typeOfClient = new EventEmitter<IBox[]>();