Question

我多次尝试解决这个问题，但我认为你的帮助角度开发人员，我正在尝试将json对象填充到UI中：

继承人JSON对象：

items = {“departure”：“纽约”，“到达”：“加利福尼亚”，“站”：[{“station”：“toto”}]}

继承人User Interface，我在用户界面中有一个提交按钮，它没有出现，但它可以执行此功能不是问题：

save(){
  console.log(Json.stringify(this.myForm.value))
 }

生成的Json对象是：

{ “tabls”：[{ “价格”：20}]}

它显示了我唯一的第一个价格，但我想要的是，在我的情况下，在生成的json中生成的显示价格应该是：

{ “tabls”：[{ “价格”：20}，{ “价格”：10}]}

我怎样才能达到这个结果？

继承人的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>

打字稿代码：

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

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

Answer 1

您必须使用formControlName =＆＃34; 价格＆＃34;进行2次输入，它覆盖以前的值;

Answer 2

ngOnInit() {
   let lista = this.buildArray([{price:0},{price:0}]);
   this.myForm = this._fb.group({
   tabls=lista
   }):

}

buildArray(data: any[]) {
    //witch each data, we create a fbGroup 

    const arr = myArray.map(data => {
      return this.fb.group({
        "Id": [data.Id], //we can omit some control
        "betslipTeamName": [data.betslipTeamName],
        "stake": [data.stake],
      });
    });
    //And return a array of fbGroup
    return this.fb.array(arr);
  }

请参阅Binding a text input to a property in an observable object - Angular 2+中已完成的示例，或查看有关此

的多重链接

如何使用角度反应形式生成复杂的JSON对象

2 个答案: