角反应形式

Question

我有两个 Angular 组件。一种称为网络服务，另一种称为网络服务。我在 Web 服务的模板页面上托管一个 Web 服务，并尝试通过我从 @angular/core 导入的 @Input() 装饰器绑定到它的服务属性。 However, whenever a web service is selected, I'm getting an error message of 'Cannot read property controls of undefined' which seems to be a problem with my web-service.component.html when it accesses inputParameters.controls.设置后，我已将 inputParameters.controls 打印到控制台，并且名称和类型都肯定作为表单控件存在。我是否以某种方式在 HTML 中错误地访问了它们？

web-services.component.ts

export class WebServicesComponent implements OnInit {
  services: Observable<WebService[]>;
  isLoading = false;
  selectedService: WebService;

  constructor(private webServicesService: WebServicesService) { }

  ngOnInit() {
    this.getServices();
  }

  getServices() {
    this.isLoading = true;
    this.services = this.webServicesService.getWebServices()
      .finally(() => this.isLoading = false);
    this.selectedService = undefined;
  }

  selected(service: WebService) {
    this.selectedService = service;
  }

}

web-services.component.html

<h3 *ngIf="isLoading"><i>Loading services ... </i></h3>
<h3 *ngIf="!isLoading && !selectedService">Select a service:</h3>

<ul class="ms-List" *ngIf="!selectedService">
    <li class="ms-ListItem" tabindex="0" *ngFor="let service of services | async">
        <span class="ms-ListItem-primaryText">{{service.name}}</span> 
        <span class="ms-ListItem-secondaryText">{{service.description}}</span> 
        <span class="ms-ListItem-tertiaryText">{{service.version}}</span> 
        <span class="ms-ListItem-metaText">{{service.creationTime}}</span> 
        <a class="ms-Link" (click)="selected(service)">Select</a> 
    </li>
</ul>

<div *ngIf="selectedService">
    <app-web-service [service]="selectedService"></app-web-service>
</div>

web-service.component.ts

export class WebServiceComponent implements OnInit {
  @Input() service: WebService;

  serviceForm: FormGroup;

  constructor(private fb: FormBuilder, private excelService: ExcelService) { 
    this.createForm();
  }

  ngOnInit() {

  }

  createForm() {
    this.serviceForm = this.fb.group({
      inputParameters: this.fb.array([]),
      outputParameters: this.fb.array([])
    });
  }

  ngOnChanges() {
    this.setParameters()
  }

  setParameters() {
    console.log(this.service.inputParameterDefinitions);
    const inputParameters = this.service.inputParameterDefinitions.map(input => this.fb.group(input));
    const inputParametersFormArray = this.fb.array(inputParameters);
    this.serviceForm.setControl('inputParameters', inputParametersFormArray);

    console.log(this.serviceForm.controls);

    const outputParameters = this.service.outputParameterDefinitions.map(output => this.fb.group(output));
    const outputParametersFormArray = this.fb.array(outputParameters);
    this.serviceForm.setControl('outputParameters', outputParametersFormArray);
  }

web-service.component.html

<form [formGroup]="serviceForm" (ngSubmit)="onSubmit()" novalidate>
    <!-- Service Controls -->
    <div formArrayName="inputParameters">
        <div *ngFor="let parameter of inputParameters.controls; let i=index" [formGroupName]="i">
            <!--The repeated parameter template-->
            <div>
                <label>Name:
                    <input formControlName="name">
                </label>
            </div>
            <div>
                <label>Type:
                    <input formControlName="type">
                </label>
            </div>
        </div>
    </div>
</form>

Answer 1

在设置参数之前尝试测试你的service是否不为空：

ngOnChanges(changes: {[ propName: string]: SimpleChange}) {
        if(changes[service].currentValue)
              this.setParameters();
}

希望对你有帮助:)