javascript - 无法从 Angular 2 中的多选输入文本框中获取值

Question

我创建了一个文本框，它有一个“+”(添加按钮)和一个“-”(删除按钮)。当我点击 + 时，我又得到一个文本框。当我点击 - 时，我删除了那个文本框及其值。为了捕获文本框的值，我使用了 ngModel。我在不使用表格的情况下进行了尝试。我面临的问题是 -

[1.]

当我点击“+”按钮时，我成功地得到了文本框，我也得到了它的值。但是对于使用“+”按钮完成的后续添加，我得到相同的值。当我更改它的值时，使用“+”按钮完成的每个其他文本框的值都会发生变化。

[2.] 我不知道如何从数组变量中删除文本框的值。

请帮忙

代码-app.component.html

<div *ngIf="addContainer">
  <p style="margin-left: 200px; font-size:18px">Please enter the API 
   Object -</p>

<table align="center">

    <tbody>

      <tr >

          <td  >
            <input  type="text" placeholder="Enter a Node" [(ngModel)]= "firstValue">
          </td>
          <td  >
            <button type="button" style="margin-left: 10px" (click)="addOne(firstValue)" class="btn btn-success"> + </button>
          </td>
          <td>
            <button type="button" style="margin-left: 10px" (click)="deleteOneMore()" class="btn btn-danger"> - </button>
          </td>

      </tr>


      <tr *ngFor="let container of containers; let i = index;" #myElement>
          <ng-container >
            <td  id="1myElement">
              <input *ngIf="addMore" type="text" placeholder="Enter a Node" [(ngModel)]= "addedValue">
            </td>
            <td  id="1myElement">
              <button type="button" style="margin-left: 10px" (click)="addOneMore($event)" class="btn btn-success"> + </button>
            </td>
            <td>
              <button type="button" style="margin-left: 10px" (click)="deleteOneMore()" class="btn btn-danger"> - </button>
            </td>
          </ng-container>
        </tr>

      <tr>

        <td style="text-align:center">
          <button type="button" (click)="showGraphs(firstValue,addedValue)" class="btn btn-dark">Search</button>
        </td>
      </tr>
    </tbody>
   </table>
  </div>

app.component.ts

addOne(firstDropdValue) {

        console.log("inside addOne = firstDropdValue = ", 
      firstDropdValue);

        this.addMore = true;
        this.containers.push(this.containers.length);

    }

  addOneMore(addedValue)
    {
        this.moreValues.push(addedValue);

        console.log("Inside AddOneMore More Values = ", 
      this.moreValues);

    }
    deleteOneMore(){

        this.containers.splice(this.index, 1);
    }


    showGraphs(firstV, addedV) {
        console.log("inside showGraphs()");
        console.log("firstValue =", firstV, "addedValue = ", addedV);
        this.showEwayBill = true;
        this.showCollection = true;
        this.EwayBill();
        this.Collection();
    }

图片-

Answer 1

您应该为新添加的值维护一个数组，如下所示，您的add 和remove 应该如下所示

values = ["sometext"];

addOneMore() {
  this.values.push("sivakumar");
}

deleteOneMore(index) {
  this.values.splice(index, 1);
}

在模板文件中，您可以使用 values 或 containers 数组来循环，如下所示

<table>
  <tr>
    <td>
      <input type="" [(ngModel)]='values[0]'>
    </td>
    <td>
      <button type="button" style="margin-left: 10px" (click)="addOneMore(firstValue)" class="btn btn-success"> + </button>
    </td>
    <td>
      <button type="button" style="margin-left: 10px" (click)="deleteOneMore(i)" class="btn btn-danger"> - </button>
    </td>
  </tr>

  <ng-container *ngFor="let value of values; let i = index;">
    <tr *ngIf="i > 0">
      <td id="1myElement">
        <input type="text" placeholder="Enter a Node" [(ngModel)]="values[i]">
      </td>
      <td id="1myElement">
        <button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
      </td>
      <td>
        <button type="button" style="margin-left: 10px" (click)="deleteOneMore(i)" class="btn btn-danger"> - </button>
      </td>
    </tr>
  </ng-container>
</table>

但是，在这个解决方案中，仍然存在一个问题，在文本框中，我们允许一次输入一个单词，我无法弄清楚原因，如果有人可以，欢迎您编辑答案;-)

工作 stackblitz 是 here