将元素添加到Angular拖放列表在UI中重复自身，而不是创建新元素

Question

我的CdkDragDrop列表显示正常，但是当我尝试以编程方式添加元素时，即使模型正确，它也会出现故障并再次显示相同的值。

我的预期输出

  

cust.first ...

     

编辑xxxme

     

编辑我<---- UI在此处显示不同的值

之前：

添加新元素（并提交火灾）

控制台输出

我的TS文件：

onSubmit(i:number) { 
  console.log('editing '+i+' new val:'+this.editval);
  if(this.editval.length>0)
    this.strtransforms[i]=this.editval; //update cell
  else
    alert('cant add empty transform')

    console.log('transforms: '+JSON.stringify(this.strtransforms))
    this.strtransforms.push("click me")
    console.log('transforms: '+JSON.stringify(this.strtransforms))
 }

我的HTML：

<div *ngIf="!loading$">
        <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
                <div class="example-box" *ngFor="let s of strtransforms;index as i" cdkDrag 
                        [contentEditable]="true" (contextmenu)="rclick(i)"
                        (input)="editval = $event.target.innerText">{{s}} 
                        <fa-icon [icon]="['fas', 'coffee']" (click)="onSubmit(i)"></fa-icon>
                </div>               
        </div>
</div>