Angular

Question

我正在尝试对我的数据实施数据过滤-table。我已经使用 ngModel 设置了一些表单，以便在我在表单中写入时填充 FormComponent 属性。例如，如果我以 sequenceId 形式编写，sequenceId 属性将获得该值。

export class FormComponent implements OnInit {

  constructor() { }

  panelOpenState = false;
  formGroup!: FormGroup;

  sequenceId!: string;
  asOrigin!: number;
  prefix!: string;
  suffix!: number;
  collectorIp!: string;
  collectorAsn!: string;
  durationGreater!: number;
  durationSmaller!: number;
  startDate!: Date;
  endDate!: Date;
  updates!: number;
  withdraws!: number;
  announces!: number;

...
}

为了处理过滤，我试图将此值赋予 SequenceComponent，它负责在 table 中显示数据。我不知道如何将 FormComponent 中包含的信息提供给该组件。我已经尝试定义一个类型为 FormComponent 的属性，但它显然没有链接到我试图获取的信息。

export class SequencesComponent{

...

  datiForm!: FormComponent;

...
}

Answer 1

您可以使用 @ViewChild 获取对子组件的引用，然后检索对您想要的字段的引用

export class SequencesComponent{

    @ViewChild(FormComponent)
    private formComponent: FormComponent; 

  public someMethod(){
    this.formComponent.formGroup  <---- will give you a reference to the form of the child component

  }

}

Angular - 如何将数据从一个组件传递到另一个组件

Angular - how to pass data from a component to another

data-binding

components

filtering