Javascript 如何使用angular2从json对象动态生成文本字段

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

项目={“出发”：“纽约”，“到达”：“加利福尼亚”，“车站”：[{“车站”：“托托”}，{“车站”：“提提”}，{“车站”：“塔塔”}，…]}

我想从这个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>

{{item.station}-->{{items.stations[i+1]。station}
提交

此代码在此图片中给出了此结果：

但是当我试图在一个生成的文本框中更改价格时，所有的文本框也都被转换了，我不知道为什么，我还想在单击提交按钮时生成这个JSON对象：

{“出发”：“纽约”，“到达”：“加利福尼亚”，“车站”：[{“车站”：“托托”}，{“车站”：“提提”}，{“车站”：“塔塔”}]， “价格”：[{“etape”：“纽约-->托托”，“价格”：“20”}，{“etape”：“托托-->>提提”，“价格”：“10”}， {“etape”：“titi-->塔塔”，“价格”：“40”}，“etape”：“塔塔-->加利福尼亚”，“价格”：“65”}]}

有人能帮你实现这个结果吗？

给你：

您所需要做的就是在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>

{{items.deposition}}-->
{{items.station[0]。station}
{{items.arrival}
{{item.station}-->{{items.stations[i+1]。station}
{{items.stations[items.stations.length-1].station}}-->{{items.arrival}
提交

对于输出结果，您必须阅读 角度，通过使用它，您将能够达到预期的结果

---

谢谢回答ser，你能把它添加到plunker项目吗？@yoyo1236areezd，请先用你的代码创建plunker，我会在那里进行必要的更改我尝试了你的代码，但它给了我这个错误：错误错误错误：未捕获（承诺）：类型错误：无法读取不确定建议的属性“离开”？我的代码中有一个错误，我用单词station替换了city，因为json对象中没有这样的东西，所以你的工作不符合预期。相同的错误：错误：Uncaught（承诺中）：TypeError：无法读取未定义的属性'depenation'，只是提醒你json对象：items={“depenation”：“New York”，“arrival”：“加利福尼亚”，“车站”：[{“车站”：“托托”}，{“车站”：“提提”}，{“车站”：“塔塔”}]}；