如何使用angular2从json对象动态生成TextFields

Question

我在项目中使用angular2，遇到了使用它的一些问题，我有一个API返回此JSON对象：

items = {“出发地”：“纽约”，“到达”：“加利福尼亚”，“车站”：[{“车站”：“ toto”}，{“车站”：“ titi”}，{“车站”： “塔塔”}，...]}

我想从这个JSON对象实现的是（看这张图）： 那就是我想要实现的

我尝试了这段代码，但是没有按预期工作：

<div class="panel-body panelcolor">
     <div *ngFor="let item of items.stations; let i=index, let last = last">

        <div  *ngIf="!last"><span>{{item.station}}</span> --> <span *ngIf="items.stations[i+1]">{{items.stations[i+1].station}}</span>
                              <div class="input-group spinner">
                                        <input type="text" formControlName="price" class="form-control" >
                                        <div class="input-group-btn-vertical">
                                        <button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
                                        <button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
                                        </div>
                              </div>
                                      </div>

                        </div>
                                    <button style="margin-left: 479px;"> Submit </button>
                    </div>

此代码在此图片中给出了此结果： 那就是我尝试过的

但是，当我尝试更改一个生成的文本框中的价格时，所有文本框也都经过修改，我不知道为什么，当我单击提交按钮时，我也想要生成此JSON对象：

{“出发地”：“纽约”，“到达”：“加利福尼亚”，“站点”：[{“站点”：“ toto”}，{“站点”：“ titi”}，{“站点”：“ tata” “}]，”价格“：[{” etape“：”纽约-> toto“，”价格“：” 20“}，{” etape“：” toto->> titi“，”价格“： “ 10”}，{“ etape”：“ titi-> tata”，“ price”：“ 40”}，“ etape”：“ tata-> California”，“ price”：“ 65”}]}}

任何人都可以帮助达到这个结果吗？

Answer 1

干得好 ：

您所需要做的就是在for循环之外的代码，以方便您离开第一个车站和最后一个车站

<div class="panel-body panelcolor">

    <div *ngIf="items?.departure">
        <span>{{items.departure}}</span> --> 
        <span *ngIf="items.stations.length > 0">
            {{items.stations[0].station}}
        </span>
        <span *ngIf="items.stations.length === 0">
            {{items.arrival}}
        </span>

        <div class="input-group spinner">
            <input type="text" formControlName="price" class="form-control">
            <div class="input-group-btn-vertical">
                <button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
                <button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
            </div>
        </div>
    </div>    

    <div *ngFor="let item of items.stations; let i=index, let last = last">

        <div *ngIf="!last">
            <span>{{item.station}}</span> --> <span *ngIf="items.stations[i+1]">{{items.stations[i+1].station}}</span>
            <div class="input-group spinner">
                <input type="text" formControlName="price" class="form-control">
                <div class="input-group-btn-vertical">
                    <button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
                    <button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
                </div>
            </div>
        </div>

    </div>

    <div *ngIf="items?.arrival && items?.stations.length > 0">
        <span>{{items.stations[items.stations.length-1].station}}</span> --> <span>{{items.arrival}}</span>
        <div class="input-group spinner">
            <input type="text" formControlName="price" class="form-control">
            <div class="input-group-btn-vertical">
                <button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
                <button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
            </div>
        </div>
    </div>

    <button style="margin-left: 479px;"> Submit </button>
</div>

对于输出结果，您必须阅读角度的电抗形式，通过使用它，您将能够实现所需的结果。