如何使用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>

對於輸出結果，您必須閱讀角度的電抗形式，通過使用它，您將能夠實現所需的結果。