如何使用angular创建嵌套的Javascript对象

Question

我想从下面的这个对象生成一个嵌套的Javascript对象：

items = {
  "departure": "New York",
  "arrival": "California",
  "stations": [
   { "station": "toto" }, 
   { "station": "titi" },
   ...
  ]
} 

继承人的HTML代码：

 <div formArrayName="tabls">
                    <div *ngFor="let myGroup of myForm.controls.tabls.controls; let i=index">
                      <div [formGroupName]="i">

                        <div class="row">
                          <div class="col-sm-4" >
                              <div   >
                                  <div class="inner-addonx left-addon header-search" style="float:left;margin-right: 4px;">
                                    <i class="glyphicon  markerx" style="border: 5px solid #FED141"></i>
                                  </div>
                                <span >{{items.departure}}</span> 

                              </div>
                          </div>
                          <div class="col-sm-1" ><img style="    width: 32px;    height: 22px;" src="../assets/img/arrow.svg" ></div>
                          <div class="col-sm-4" >
                              <span *ngIf="items.stations.length > 0">
                                  {{items.stations[0].station}}
                              </span>
                              <span *ngIf="items.stations.length === 0">
                                  {{items.arrival}}
                              </span>
                          </div>

                          <div class="col-sm-3" >
                              <div class="input-group " >

                                  <input type="number" formControlName="price"  value="1000" min="0" step="1" [attr.id]="'textbox'" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency" id="c2" /> 
                                  <span class="input-group-addon">Dhs</span>
                            </div>
                          </div>
                        </div>




                        <hr/>
                        <div class="row">
                            <div *ngIf="items?.arrival && items?.departure">
                                <div class="col-sm-4">
                                    <div  style="">
                                        <div class="inner-addonx left-addon header-search" style="float:left;margin-right: 4px;">
                                            <i class="glyphicon  markerx" style="border: 5px solid #63a599"></i>
                                        </div>
                                        <span>{{items.departure}}</span> 

                                  </div>
                                </div>
                                <div class="col-sm-1" >
                                    <img style="    width: 32px;    height: 22px;" src="../assets/img/arrow.svg" >
                                  </div>
                                <div class="col-sm-4" >
                                    <div  style="">
                                        <div class="inner-addonx left-addon header-search" style="float:left;margin-right: 4px;">
                                            <i class="glyphicon  markerx" style="border: 5px solid #F53F5B"></i>
                                        </div>
                                        <span>{{items.arrival}}</span>
                                    </div>
                                </div>

                                <div class="col-sm-3" >
                                    <div class="input-group ">

                                        <input type="number" formControlName="price"  value="1000" min="0" step="1" [attr.id]="'finalprice'" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency" id="c2" />
                                        <span class="input-group-addon">Dhs</span>


                                    </div>
                                </div>

                            </div>
                        </div>
                      </div>
                    </div>

                  </div>

上面的代码填充json项目对象以获取此result UI

当我提交按钮时，我想生成此对象。

我想要得到的这个json对象：

>  {"tabls":[{"price":20},{"price":10},...]} 

上面的代码填充json项目对象以获取此result UI

当我提交按钮时，我想生成此对象。

我想要得到的这个json对象：

>  {"tabls":[{"price":20},{"price":10},...]} 

打字稿代码：

ngOnInit() {
   this.myForm = this._fb.group({

   tabls: this._fb.array([
    this.initArray2()
   ]),
 })
 }
initArray2() {
   return this._fb.group({
   price: [''],
  });
 }

是否可能。