Question

我正在尝试在当前的Angular项目中实现动态输入。我对动态输入有疑问。这是浏览器控制台错误。

setValues 是 DynamicFormComponent 的功能。

ERROR TypeError: Cannot read property 'setValues' of undefined
    at SafeSubscriber._next (job-department-edit.component.ts:154)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:84)

父项（ts）：

@ViewChild(DynamicFormComponent)
  private readonly formComponent: DynamicFormComponent;

constructor() {
...
}

ngOnInit(): void {
    this.appComponent.setPageTitle(this.pageName);
    const splittedUrl = this.router.url.split('/');
    this.languageCode = splittedUrl[1];
    this.translateService.use(this.languageCode);
    this.jobDepartmentId = splittedUrl[6];

    this.getBoxTitle();
    this.getCurrencies();
    this.getJobDepartments();
  }

  ngAfterViewInit(): void {
    this.inputs = this.getInputs();

    if (this.jobDepartmentId !== undefined) {
      this.getJobDepartment(this.jobDepartmentId);
    }
  }

父组件（html）：

<div class="row">
  <div class="col-sm-12">
    <dynamic-form *ngIf="currencies.length && jobDepartments.length" [boxTitle]="boxTitle" [inputs]="inputs" [languageCode]="languageCode" (onSubmit)="onSubmit($event)"></dynamic-form>
  </div>
</div>

子组件（ts）

@Input()
  languageCode: string;

  @Input()
  inputs: InputBase<any>[] = [];

  @Input()
  boxTitle = '';

  @Output()
  onSubmit = new EventEmitter<DynamicFormComponent>();

  @Output()
  onFormInit = new EventEmitter<void>();

  form: FormGroup;

子组件（html）

<app-card cardTitle="{{ boxTitle }}">
  <form role="form" class="form-horizontal" [formGroup]="form" (ngSubmit)="submit()" autocomplete="off" novalidate>
    <div class="row">
      <ng-container *ngFor="let input of inputs">
        <div class="col-md-6">
          <dynamic-input [input]="input" [form]="form" [languageCode]="languageCode"></dynamic-input>
        </div>
      </ng-container>
    </div>

    <ng-content></ng-content>

    <div class="form-group text-center">
      <button type="submit" name="submit" id="submit" class="btn btn-success">
        {{'save' | translate}}<span style="margin-left:10px;"><i class="feather icon-save"></i></span>
      </button>
    </div>
  </form>
</app-card>

父级组件未完全加载子级组件。

我该如何解决这个问题？

如何初始化视图子组件？

0 个答案: