Angular 反应式多维阵列

我正在尝试将多维数组显示为窗体。我希望能够指定x列和y行的值

我不确定输入框的formControlName中应该放什么

普朗克：

代码：

设置
（{x}，{y}）
提交

Typescript/Angular代码：（删除了PatchValue，因为它工作正常，并不重要，您可以在plunker示例中看到它。）

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{FormBuilder，Validators，FormGroup，FormArray，FormControl}；
导出类设置组件实现OnInit{
公共设置窗体：FormGroup；
_X_行的公共编号：编号=4；
行的公共编号：编号=4；
公共阈值数组=[]；
公共鳞片；
公共标度最大；
构造函数（公共fb:FormBuilder）{}
恩戈尼尼特（）{
this.initValues（）；
这个.buildForm（）；
变量设置值={
斯卡莱明：这个，斯卡莱明，
scaleMax:this.scaleMax，
thresholdArray:this.thresholdArray
}
this.patchValue（this.settingsForm，settingsValues）；
console.log（this.settingsForm）
}
initValues（）{
设x：数字；
设y：数字；
if（localStorage.getItem（'scaleMin'）==null）{
这个。scaleMin=-140000；
setItem（'scaleMin'，this.scaleMin）；
}否则{
this.scaleMin=localStorage.getItem（'scaleMin'）；
}
if（localStorage.getItem（'scaleMax'）==null）{
这个指数为-90000；
setItem（'scaleMax'，this.scaleMax）；
}否则{
this.scaleMax=localStorage.getItem（'scaleMax'）；
}
if（localStorage.getItem（'thresholdArray'）==null）{
log（“初始化阈值数组”）；
对于（y=0；y

您是否想过只寻找一些已经存在的开源软件。。例如你有没有想过寻找一些已经存在的开源的东西。。例如

<div class="jumbotron">
  <legend>Settings</legend>
  <form [formGroup]="settingsForm" class="form-horizontal">
    <fieldset>
      <div formArrayName="thresholdArray">
        <div class="row" *ngFor="let y_row of settingsForm.controls.thresholdArray.controls; let y = index" >
          <div class="col-lg-3" *ngFor="let x_row of y_row.controls.threshold.controls; let x = index" [formGroupName]="y">
            <div class="well bs-component">
              <label for="inputThreshold" class="col-lg-2 control-label">({{ x }},{{ y }})</label>
              <div class="col-lg-10">
                <input type="text" formControlName="x" class="form-control" id="inputThreshold" placeholder="Threshold" autocomplete="off">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <button type="submit" class="btn btn-primary btn-lg">Submit</button>
        </div>
      </div>
    </fieldset>
  </form>
</div>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup, FormArray, FormControl } from '@angular/forms';

export class SettingsComponent implements OnInit {

    public settingsForm: FormGroup;
    public NUMBER_OF_X_ROWS: number = 4;
    public NUMBER_OF_Y_ROWS: number = 4;
    public thresholdArray = [];
    public scaleMin;
    public scaleMax;

    constructor(public fb: FormBuilder) { }

    ngOnInit() {
        this.initValues();
        this.buildForm();
        var settingsValues = {
            scaleMin: this.scaleMin,
            scaleMax: this.scaleMax,
            thresholdArray: this.thresholdArray
        }
        this.patchValue(this.settingsForm, settingsValues);

        console.log(this.settingsForm)
    }

    initValues() {
        let x: number;
        let y: number;
        if (localStorage.getItem('scaleMin') === null) {
            this.scaleMin = -140000;
            localStorage.setItem('scaleMin', this.scaleMin);
        } else {
            this.scaleMin = localStorage.getItem('scaleMin');
        }
        if (localStorage.getItem('scaleMax') === null) {
            this.scaleMax = -90000;
            localStorage.setItem('scaleMax', this.scaleMax);
        } else {
            this.scaleMax = localStorage.getItem('scaleMax');
        }
        if (localStorage.getItem('thresholdArray') === null) {
            console.log("Initializing thresholdArray");
            for (y = 0; y < this.NUMBER_OF_Y_ROWS; y++) {
                let tempArray = [];
                //this.thresholdArray[y] = [];
                for (x = 0; x < this.NUMBER_OF_X_ROWS; x++) {
                    tempArray.push(-102000)
                }
                this.thresholdArray[y] = { 'threshold': tempArray }
            }
            localStorage.setItem('thresholdArray', JSON.stringify(this.thresholdArray));
        } else {
            this.thresholdArray = JSON.parse(localStorage.getItem('thresholdArray'));
        }
    }

    buildForm() {
        this.settingsForm = this.fb.group({
            scaleMin: [''],
            scaleMax: [''],
            thresholdArray: this.fb.array([
                this.fb.group({
                    threshold: this.fb.array([
                    ])
                })
            ])
        })
    }
}