Angular 如何处理这个错误'；类型中缺少索引签名…'；

我正试图丰富Josh Hicks的这个非常好的教程

通过添加一些FormGroup和FormArray，但在form model类中

export class TeamForm {

  group1 = new FormGroup(new MyGroupForm(new MyGroup()));

  constructor(team: Team) {

    if (team.group1) {
      this.group1.setValue(team.group1);
    }
  }
}

这条线

group1 = new FormGroup(new MyGroupForm(new MyGroup()));

返回以下错误

Argument of type 'MyGroupForm' is not assignable to parameter of type '{ [key: string]: AbstractControl; }'.
Index signature is missing in type 'MyGroupForm'.

这是

MyGroupForm

类

import { FormControl, Validators } from "@angular/forms";
import { MyGroup } from "./mygroup.model";

export class MyGroupForm {
  Input1 = new FormControl();
  Input2 = new FormControl();

  constructor(groupValue: MyGroup) {

    this.Input1.setValue(groupValue.Input1);
    this.Input1.setValidators([Validators.required]);

    this.Input2.setValue(groupValue.Input2);
  }
}

export class MyGroup {
  Input1: string;
  Input2: string;

  constructor(value?) {
    if (value) {
      this.Input1 = value.Input1;
      this.Input2 = value.Input2;
    }
  }
}

这是

MyGroup

类

import { FormControl, Validators } from "@angular/forms";
import { MyGroup } from "./mygroup.model";

export class MyGroupForm {
  Input1 = new FormControl();
  Input2 = new FormControl();

  constructor(groupValue: MyGroup) {

    this.Input1.setValue(groupValue.Input1);
    this.Input1.setValidators([Validators.required]);

    this.Input2.setValue(groupValue.Input2);
  }
}

export class MyGroup {
  Input1: string;
  Input2: string;

  constructor(value?) {
    if (value) {
      this.Input1 = value.Input1;
      this.Input2 = value.Input2;
    }
  }
}

stackblitz中的相同代码在代码编辑器中返回相同的错误，但构建良好

现在，奇怪的事情来了

如果我替换此文件名中的点（.）

mycontrol form.model.ts

对于这样的逗号（，）：

mycontrol表单，model.ts

错误消失了。但这只是在闪电战中

---

显然我做错了什么，如果能在这个问题上得到一些帮助，我将不胜感激。

今天我学习了如何在类中实现索引签名。我缺少的是，我没有为类中声明的变量定义任何类型。因此，在我的案例中，解决方案非常简单：

export class MyGroupForm  {

  Input1: FormControl = new FormControl();
  Input2: FormControl = new FormControl();
}

现在，如果我们想为对象定义通用模型，我们将创建一个类型接口，并在类中实现它，如下所示：

interface IndexSignature {
  [key: string]: FormControl;
}

export class MyGroupForm implements IndexSignature {
  [key: string]: FormControl;

  Input1 = new FormControl();
  Input2 = new FormControl();
}

如果我们的对象有多种类型，我们可以这样声明：

interface IndexSignature {
  [key: string]: FormControl | FormArray;
}

export class MyGroupForm implements IndexSignature {
  [key: string]: FormControl | FormArray;

  Input1 = new FormControl();
  Array1 = new FormArray([]);
}

或者在这种特殊情况下，

FormControl

和

FormArray

都属于

AbstractControl

类型，我们只定义这种类型：

interface IndexSignature {
  [key: string]: AbstractControl;
}

export class MyGroupForm implements IndexSignature {
  [key: string]: AbstractControl;

  Input1 = new FormControl();
  Array1 = new FormArray([]);
}

这是我对索引签名的理解。如果有人想添加或更正任何内容，请随时添加或更正…

这可能会有所帮助：