Javascript 如何在动态文本框中以1动态填充后续输入的值？

我有一个动态生成的输入框，我如何设置textbox的值，前一个值加1。如图所示，当我们输入10时，11应自动设置在下方框中，同样，输入20时，21应自动设置在下方框中。

slabDetailsHeader：[
{key:'from'，value:'from'，占位符：'Eg:0'}，
{key:'to'，value:'to'placeholder:'Eg:10'}，
],
添加行
//添加行单击
公共引线DSLABROW=（e，长度）=>{
常量slab={id:0，从：“”，到：“”}；
slab.id=长度；
这个.tableData.push（slab）；
}
公共处理更改=（e，值，i）=>{
this.tableData.filter（el=>{
如果（i==el.id）{
表数据[i][value]=e；
}
});
}

slabDetailsHeader: [
        { key: 'from', value: 'From',placeholder: 'Eg: 0' },
        { key: 'to', value: 'To'placeholder: 'Eg: 10' },
    ],

  <div *ngFor="let list of tableData; let i = index" >
         <div *ngFor="let heading of header" [ngStyle]="{'width': (98/slabHeader.length) +'%'}">
                    <input type ="text" [value]="list[heading.key]"
                        [placeholder]="heading.placeholder" (onChange)="handleChange($event, heading.key, i)"/>
           </div>
        <div>
<button (click)="handleAddRow(event, tableData.length)">Add Row</button>

// add row click
  public handleAddSlabRow = (e, length) => {
    const slab = { id: 0, from: '', to: ''};
    slab.id = length;
    this.tableData.push(slab);
  }

  public handleChange = (e, value, i) => {
    this.tableData.filter(el => {
      if (i === el.id) {
        this.tableData[i][value] = e;
      }
    });
  }