typescript动态创建select

[zxp1103]

 <div class="form-group" id="steps">
    <label for="productionStep">生产工艺步骤</label>
    <select class="form-control inline" name="productionStepId" [(ngModel)]="productionStepId"  (change)="addStep()"
      *ngIf="productionSteps">
      <option [value]="0">(未选择)</option>
      <option *ngFor="let productionStep of productionSteps" [value]="productionStep.id">{{ productionStep.name }}</option>
    </select>
  </div>

前端用的是nagular框架，实现用的是typescript，本人刚开始学习。
我想实现的是，这个选择框选好一个选项之后，动态添加一个完全一样的select,并且change方法一样要绑定addStep()方法，下拉列表也要绑定productionSteps。

  addStep(){
    var htmlStr = '<select class="form-control inline" name="productionStepId" [(ngModel)]="productionStepId"  (change)="addStep()" *ngIf="productionSteps">' 
    +'<option [value]="0">(未选择)</option>'
    +'<option *ngFor="let productionStep of productionSteps" [value]="productionStep.id">{{ productionStep.name }}</option>'
    +' </select>';
    var select=document.createElement("select");
    select.innerHTML=htmlStr;
    let steps= document.getElementById("steps");
    steps.appendChild(select);
  }

求大神指点

[scscms太阳光]

MVVC框架基本是不会再去操作dom的。你的 addStep方法里应该只是修改productionSteps的值即可。

[zxp1103]

引用 1 楼 xzy21com 的回复:

MVVC框架基本是不会再去操作dom的。你的 addStep方法里应该只是修改productionSteps的值即可。

嗯，说的有道理。 只不过我不是要去添加option  而是要增加一个新的一模一样的select元素

[scscms太阳光]

要添加一个一模一样的select你就在外层再添加一个数组做一下*ngFor呀

<select class="form-control inline" *ngFor="let select of selectArray" 然后去修改selectArray

[zxp1103]

引用 3 楼 xzy21com 的回复:

要添加一个一模一样的select你就在外层再添加一个数组做一下*ngFor呀 <select class="form-control inline" *ngFor="let select of selectArray" 然后去修改selectArray

谢谢指点 后来修改前端页面成这样：

    <ng-container *ngFor="let step of steps;let i=index" >
      <select class="form-control inline"  [(ngModel)]="steps[i]" (change)="addStep()">
        <option [value]="0">(未选择)</option>
        <option *ngFor="let productionStep of steps[i]" [value]="productionStep.id">{{ productionStep.name }}</option>
      </select>
    </ng-container>

已经实现选择之后会动态增加一个新的select，但是有时候会出现新的SELECT 绑定的列表不对的情况。

[zxp1103]

引用 4 楼 zxp1103 的回复:

[quote=引用 3 楼 xzy21com 的回复:] 要添加一个一模一样的select你就在外层再添加一个数组做一下*ngFor呀 <select class="form-control inline" *ngFor="let select of selectArray" 然后去修改selectArray

谢谢指点 后来修改前端页面成这样：

    <ng-container *ngFor="let step of steps;let i=index" >
      <select class="form-control inline"  [(ngModel)]="steps[i]" (change)="addStep()">
        <option [value]="0">(未选择)</option>
        <option *ngFor="let productionStep of steps[i]" [value]="productionStep.id">{{ productionStep.name }}</option>
      </select>
    </ng-container>

已经实现选择之后会动态增加一个新的select，但是有时候会出现新的SELECT 绑定的列表不对的情况。[/quote] 并且新的元素是在老的前面，而不是后面

[scscms太阳光]

引用

并且新的元素是在老的前面，而不是后面

解决这个很简单呀：如果steps.push()顺序不对就改steps.unshift()。

[zxp1103]

引用 6 楼 xzy21com 的回复:

引用

并且新的元素是在老的前面，而不是后面

解决这个很简单呀：如果steps.push()顺序不对就改steps.unshift()。

谢谢，搞定了 被这个双向绑定搞死了，开始用的双向绑定【（）】,导致列表莫名其妙多出选项，后面改用单向绑定，不要2个括号，现在好了。非常感谢

[zxp1103]

引用 6 楼 xzy21com 的回复:

引用

并且新的元素是在老的前面，而不是后面

解决这个很简单呀：如果steps.push()顺序不对就改steps.unshift()。

但是还有个问题，单向绑定之后，怎么获取select选择得数据呢？