未捕获的错误：无法解析组件的所有参数：（[object Object]？）

Question

所以，在您阅读整个错误堆栈之前，请记住，目前我无法确定导致问题的确切部分。但是，我将在错误堆栈下方公开代码。所以，我唯一的问题是：哪些参数无法解析？

如果您愿意，可以自己测试我的应用程序。这是一个简单的默认 Angular 6 应用程序，具有您从以下命令获得的所有默认设置：

ng new app-name

让我们从错误开始。应用程序正常启动。当我尝试运行代码时，弹出此错误：未捕获错误：无法解析组件的所有参数：（[object Object]？）。您可以阅读下面的完整错误堆栈。

Uncaught Error: Can't resolve all parameters for Component: ([object Object]?).
    at syntaxError (compiler.js:1016)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:10917)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:10810)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:10429)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.js:10291)
    at compiler.js:23865
    at Array.forEach (<anonymous>)
    at compiler.js:23864
    at Array.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:23861)
syntaxError @ compiler.js:1016
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata @ compiler.js:10917
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata @ compiler.js:10810
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata @ compiler.js:10429
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata @ compiler.js:10291
(anonymous) @ compiler.js:23865
(anonymous) @ compiler.js:23864
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules @ compiler.js:23861
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:23839
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:23799
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4352
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:76
0 @ main.ts:12
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1

如您所见，没有简单的方法可以判断我的打字稿的哪一部分导致了问题。但是，如果没有下面显示的 component.ts 中的代码，应用程序运行良好。所以，我的 typescript component.ts 肯定有问题

component.ts 如下所示：

import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, Directive} from '@angular/core';
import { FormGroup } from '@angular/forms';
import { DefineBusinessRuleService } from '../services/define/define-business-rule.service';
import { DefineBusinessRuleNamespace } from '../model/business-rule-namespace';

@Component({
  selector: 'app-define-business-rule',
  templateUrl: './define-business-rule.component.html',
  styleUrls: ['./define-business-rule.component.css']
})
export class DefineBusinessRuleComponent implements OnInit {
  // interfaces
  headers : Headers;
  output: any;
  @Input() minValue: string;
  @Input() maxValue: string;
  @Input() attribute : Array<string>;
  @Input() table : Array<string>;

  submitted = false;
  @Input() businessRuleType : Array<string>;
  ruletypes : Array<string>;
  ruletype : string;

  constructor(
    private defineBusinessRuleService: DefineBusinessRuleService
    ,private model : any
  ) {
    this.table = ['table1', 'table2', 'table3'];
    this.attribute = ['attribute1', 'attribute2', 'attribute3'];
    this.ruletypes = [
      // atrribute
      'AttributeRange',
      'AttributeCompare',
      'AttributeList',
      'AttributeOther',
      'TupleCompare',
      'TupleOther'

    ]
    model = {
      minValue : 5,
      maxValue : 10,
      name : 'RangeRule',
      description : 'This is a Range Rule',
      table1 : this.table[0],
      column1 : this.attribute[2],
      errorMsg : 'Error message'
    };
}

  get diagnostic() { return JSON.stringify(this.model); }

  defineNewBusinessRule() {
    //this.model = new DefineBusinessRuleService(42, 50, '', '', '', '', '');

  }

  saveAttributeRangeRule(){
    this.output = {
      database_id : 1,
      minValue : this.minValue,
      maxValue : this.maxValue,
      table1 : this.table,
      column1 : this.attribute
    }
    this.output.stringify;
    this.defineBusinessRuleService.saveAttributeRangeRule(this.output);
  }

  saveAttributeCompareRule(){
    this.output = {
      database_id : 1,
      table1 : this.table,
      //table2 : this.table2,
      column1 : this.attribute,
      //column2 : this.attribute2,
      //value : this.value
    }
    this.output.stringify;
    //this.defineBusinessRuleService.saveAttributeCompareRule(this.output);
  }

  ngOnInit(){

  }

  onSelect(){

  }

  onSubmit() {
    this.submitted = true;
    this.ruletype = this.ruletypes[0];
    switch(this.ruletype){
      case "AttributeRange" : {
        this.saveAttributeRangeRule();
        break;
      };
      case "AttributeCompare" : {
        this.saveAttributeCompareRule();
        break;
      };
    }
  }



}

感谢您阅读本文！如果你像我一样有视觉导向，那么这个表格可能会帮助你理解这段代码应该做什么。但是，这是题外话，因为我确信它不会导致角度操作问题。记住这一点！

相关的html表单如下所示

<br>
<br>

<main role="main" class="container">
  <div class="container">
    <h1>Define Business Rule</h1>
    <form (ngSubmit)="onSubmit()" #defineBusinessRuleForm="ngForm">
    <div class="form-group">
        <label for="minValue">Minimum Value</label>
        <input type="text" class="form-control" id="minValue">
      </div>

      <div class="form-group">
        <label for="maxValue">Maximum Value</label>
          <input type="text" class="form-control" id="maxValue">
      </div>

      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name"
               #name="ngModel">
        <div [hidden]="name.valid || name.pristine"
        class="alert alert-danger">
        Name is required
      </div>
      </div>

      <div class="form-group">
        <label for="description">Description</label>
        <input type="text" class="form-control" id="description" required>
      </div>

      <div class="form-group">
        <label for="table">Table</label>
        <select class="form-control" id="table" required>
          <option *ngFor="let tbl of table" [value]="table">{{tbl}}</option>
        </select>
      </div>

      <div class="form-group">
        <label for="attribute">Attribute</label>
        <select class="form-control" id="attribute" required>
          <option *ngFor="let attr of attribute" [value]="attribute">{{attr}}</option>
        </select>
      </div>

      <div class="form-group">
        <label for="errorMsg">Error Message</label>
        <input type="text" class="form-control" id="errorMsg" required>
      </div>

      <button type="submit" class="btn btn-success" [disabled]="!defineBusinessRuleForm.form.valid">Submit</button>
      <button type="button" class="btn btn-default" (click)="defineNewBusinessRule(); defineBusinessRuleForm.reset()">Define New BR</button>
    </form>
  </div>
</main>

Answer 1

错误在模型定义位置。

private model: any 应该定义为构造函数之外的参数。 通过将其放在构造函数中，编译器正在尝试解析any 类，并且自然无法这样做。

以这种方式修改您的代码：

export class DefineBusinessRuleComponent implements OnInit {
  private model : any

  constructor() {
    this.model = {
      // your model definition
    };
  }

  // rest of the code
}