相关疑难解决方法(0)

我知道在stackoverflow中已经发布了很多相同的问题并尝试了不同的解决方案以避免运行时错误,但它们都不适用于我.

组件和Html代码

export class TestComponent implements OnInit, AfterContentChecked {
    @Input() DataContext: any;
    @Input() Position: any;
    sampleViewModel: ISampleViewModel = { DataContext: : null, Position: null };
    constructor(private validationService: IValidationService, private modalService: NgbModal, private cdRef: ChangeDetectorRef) {
    }

    ngOnInit() {

    }
    ngAfterContentChecked() {

            debugger;
            this.sampleViewModel.DataContext = this.DataContext;
            this.sampleViewModel.Position = this.Position;

    }


<div class="container-fluid sample-wrapper text-center" [ngClass]="sampleViewModel.DataContext?.Style?.CustomCssClass +' samplewidget-'+ sampleViewModel.Position?.Columns + 'x' + sampleViewModel.Position?.Rows">
     //some other html here
</div>

请注意:使用DynamicComponentLoader动态加载此Component

在我遇到麻烦之后,我发现了几个问题

首先,使用DynamicComponentResolver动态加载此子组件,并传递输入值,如下所示

 ngAfterViewInit() {
    this.renderWidgetInsideWidgetContainer();

  }


  renderWidgetInsideWidgetContainer() {
    let component = this.storeFactory.getWidgetComponent(this.dataSource.ComponentName);
    let …

我使用的是matStepper，当我将selectedIndex设置为3时，无法使用下一个和上一个导航。我可以单击水平步进器中的（1），然后照常使用下一个/上一个。所有表格均有效，单击（1）后，我可以使用1-7的下一个导航。

注意我有this.selectedIndex = 3; 硬编码

<mat-horizontal-stepper #stepper
                        [linear]="true"
                        [selectedIndex]="this.selectedIndex"
                        (selectionChange)="selectionChange(stepper)">

  <mat-step [stepControl]="form1">
    <app-observer-information></app-observer-information>
  </mat-step>
...
  <mat-step [stepControl]="form7">
    <app-observer-agreement></app-observer-agreement>
  </mat-step>

</mat-horizontal-stepper>



export class ObservationStatementStepperComponent implements OnInit {

  @ViewChild('ObserverInformationComponent') public component1: ObserverInformationComponent;
  ..
  @ViewChild('ObserverAgreementComponent') public component7: ObserverAgreementComponent;

  public selectedIndex: number;

  constructor(private sorDataService: SorDataService) {

    this.selectedIndex = 3; // Number(sorDataService.selectedIndex);
  }

  public ngOnInit() {
  }

  public selectionChange(stepper) {

    this.sorDataService.synchronizeStepper(stepper.selectedIndex + 1);
  }

  /**
   * @see /sf/ask/3394927651/
   */
  get form1() {
    return this.component1 ? this.component1.form : null;
  }
  ...
  get form7() {
    return this.component7 …

我有一个材料步进器，步进器的每个步骤都有表格。在那里，每个步骤都应该由与其关联的表单控制。

尽管这个问题已经在 SO 中提出，但这些问题的答案并不能解决我的问题。因此我才问。

父 HTML

<mat-horizontal-stepper linear #stepper>
    <mat-step [stepControl]="frmStepOne">
        <ng-template matStepLabel>Step One Details</ng-template>
        <app-first-step #stepOne></app-first-step>
    </mat-step>
    <mat-step [stepControl]="frmStepTwo">
        <ng-template matStepLabel>Step Two Details</ng-template>
        <app-second-step #stepTwo></app-second-step>
    </mat-step>
</mat-horizontal-stepper> 

在我的父组件中，我有以下内容。

@ViewChild('stepOne') stepOneComponent: FirstStepComponent;
@ViewChild('stepTwo') stepTwoComponent: SecondStepComponent;


get frmStepOne() {
    return this.stepOneComponent ? this.stepOneComponent.frmStepOne : null;
}

get frmStepTwo() {
    return this.stepTwoComponent ? this.stepTwoComponent.frmStepTwo : null;
}

我的孩子类组件

frmStepOne: FormGroup;

constructor(private formBuilder: FormBuilder) {

    this.frmStepOne = this.formBuilder.group({
      name: ['', Validators.required]
    });
}

子类 HTML

<mat-card>

  <form [formGroup]="frmStepOne">

    <mat-form-field>
      <input matInput formControlName="name" matInput …