javascript - 在 Angular 8 中单击时在 NgOninit 中触发事件

Question

我有一个点击事件。如果你点击它，你可以填写一个小表格。

但我希望默认值是，如果页面是第一次加载，那么您已经看到了表单。我在 NgOninit 中尝试了它。

所以我将其作为 html:

<button mat-button mat-icon-button #nodeInput (click)="addNode($event)"><mat-icon>add</mat-icon></button>

这是方法:

 addNode(model?: SchemaTemplateNodeDTO) {
    const newControl = this.fb.control(model ? model : null, [Validators.required]);

    const node = {
      id: this.idGen++,
      children: []
    };

    // Add node to tree and form
    this.idToFormControl.set(node.id, newControl);

    const nodes = this.form.controls['nodes'] as FormArray;
    nodes.push(newControl);

    this.dataSource.data.push(node);

    // Refresh tree
    this.dataSource.data = this.dataSource.data;
  }

我现在在 NgOniti 中拥有它，就像这个:

@ViewChild('nodeInput' ) fileInput: ElementRef;
ngOnInit() {

    this.fileInput.nativeElement.dispatchEvent(event);

    this.addNode();

  }

如果我这样尝试:

  ngOnInit() {

    this.fileInput.nativeElement.click();
  }

然后我会得到这个错误:

<button mat-raised-button color="accent" (click)="saveAndPublish()" [disabled]="form.invalid">Save & Publish</button>
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.invalid">Save</button>
<form [formGroup]="form">
  <app-node-tree-input formControlName="nodes"></app-node-tree-input>
</form>

所以在另一个组件中。

这是另一个组件的一部分:

export class EditSchemaComponent implements OnInit {
  private schema: SchemaTemplateDTO;

  private fb: FormBuilder;
  form: FormGroup;

  public readonly displayedColumns = ["title", "published", "pages", "createdOnUtc", "createdBy", "edit"];

  constructor(
    private i18n: I18n,
    private schemaTemplateService: SchemaTemplateService,
    private blockerService: ScreenBlockerService,
    route: ActivatedRoute
  ) {
    this.schema = route.snapshot.data["schema"];
  }

  ngOnInit() {
    this.fb = new FormBuilder();
    this.form = this.fb.group({
      nodes: this.fb.control(this.schema.nodes)
    });
  }

Answer 1

尝试使用 nativeElement.click():

this.fileInput.nativeElement.click()