Question

我构建在Angular 8中，并且尝试呈现输入列表并使用JSON数据预填充它们。我正在为此项目使用反应式表格。类型数组已正确映射，并存储在组中。我认为它与FormArrayName以及与FormGroupName相比放置位置有关。我想知道是否需要将FormArray名称包装在FormGroup名称中。

view.ts

df_new = pd.DataFrame(columns = df.columns)
for name, group in df.groupby(['Location ID', 'Dimensions']):
    df_group = transform(group)
    pd.concat([df_new, df_group], axis=0)

view.html

export class View2Component implements OnInit {
  // public accountArr: FormArray;
  public accounts: FormArray;
  public accountForm: FormGroup;
  types: any = [
    {
      name: "Assets",
      display: {
        default:'Display Value',
        inputType:'input'
      },
      type: {
        default:'type Value',
        inputType:'selected',
        data: ['a', 'b', 'c']
      },
      totalDesc: {
        default:'totalDesc Value',
        inputType:'input'
      },
      underlineBefore: {
        default:'underlineBefore Value',
        inputType:'input'
      },
      underlineAfter: {
        default:'underlineAfter Value',
        inputType:'input'
      },
      reverse: {
        default: false,
        inputType:'checkbox'
      },
      print: {
        default: true,
        inputType:'checkbox'
      },
    },
    {
      name: "Assets",
      display: {
        default:'Display Value',
        inputType:'input'
      },
      type: {
        default:'type Value',
        inputType:'selected',
        data: ['a', 'b', 'c']
      },
      totalDesc: {
        default:'totalDesc Value',
        inputType:'input'
      },
      underlineBefore: {
        default:'underlineBefore Value',
        inputType:'input'
      },
      underlineAfter: {
        default:'underlineAfter Value',
        inputType:'input'
      },
      reverse: {
        default: false,
        inputType:'checkbox'
      },
      print: {
        default: true,
        inputType:'checkbox'
      },
    }
  ];

  get getAccountArr() { return this.accountForm.get('accounts') as FormArray; }

  constructor(private fb: FormBuilder) {

  }

  ngOnInit() {
    this.accountForm = this.fb.group({
      accounts: this.fb.array([])
    });


    this.renderAccountForm();
    console.log('accountArr', this.accountForm);
  }


  renderAccountForm() {
    this.types.map(item => {
      let val = this.fb.group({
        display: [item.display.default],
        type: [item.type.default]
      });
      this.getAccountArr.push(val);
    });
  }
}

Answer 1

您需要替换此行

<div formArrayName="getAccountArr" style="height:100px; margin:40px auto;">

使用

<div formArrayName="accounts" style="height:100px; margin:40px auto;">

您需要将FormArray的名称赋予formArrayName指令，并且getAccountArr并不是表单组中现有的表单数组，它只是一个返回表单数组的属性哪个不同

Answer 2

您使用的吸气剂不正确。替换get getAccountArr() { return this.accountForm.get('accounts') as FormArray; } 与get accounts() { return this.accountForm.get('accounts') as FormArray; }

并删除public accounts: FormArray;

get充当“别名”，每次您引用this.accounts时都会返回FormArray。

Angular 8错误“错误错误：“无法找到名称为'getAccountArr'的控件””使用表格数组时

2 个答案: