发射器数组返回错误

Question

我正在尝试将我正在广播的数据从孩子发送到父母。这应该是整个表，但我得到的数据显然是未定义的。我想将这些数据发送到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>

Answer 1

在

TypeOfClientComponent.ts

中，减速

@Output() typeOfClient = new EventEmitter<{}>();

是错误的，因为它的写入类型不是对象而是对象数组。正确的减速是，

@Output() typeOfClient = new EventEmitter<[]>();

或

 @Output() typeOfClient = new EventEmitter<IBox[]>();