如何在 angular 中正确删除 html table 元素？

Question

我尝试用 Add/Remove 元素按钮开发动态 table。每行有 2 个单元格 - 1 个是选定的单元格（可能是 disabled/enabled）和输入字段（可能很重要以使其清晰）。我用数组（存储我的对象）、ngModel 和索引 ngFor 来迭代它。

当我尝试删除元素时遇到问题，然后由于某种原因在我尝试将元素添加到 table 时并非所有数据绑定（未处于正确状态也未显示在输入字段中) 正确，即使所有数据都存储良好。

我以前以为是ngFor索引有问题，可能我更新数组的时候ngFor不是从0开始的，所以我的ngModel和我的属性引用最后一个元素（它是空的新对象）。感谢帮助，附上相关代码

addIncludeRule() {
    this.campaign.includeRules.push({
        "data": "",
        "includeData": "",
        "excludeData": "",
        "type": ""
    });
}
//==========================================================================
public removeIncludeRule(i: number) {
    this.campaign.includeRules.splice(i, 1);
}

<tbody class="esf-table__body">
  <tr class="esf-table__row" *ngFor="let irule of campaign.includeRules; index as i">
    <td class="esf-table__cell">
      <select [(ngModel)]="irule.type" name=iruleType{{i}} (change)="disabledOptionFlags(irule.type,0)" class="esf-form-item__field esf-select__field" [disabled]="irule.type[i]">
        <option *ngFor="let ioption of options" value={{ioption.value}}       [disabled]=ioption.incDisabled>{{(irule.data) ? irule.type : ioption.value}}</option>
      </select>
    </td>
    <td class="esf-table__cell">
      <input [(ngModel)]="irule.data" name=iruleValue{{i}} class="esf-form-item__field"                           type="text" value={{irule.data}} />
    </td>
    <td class="esf-table__cell esf-table__cell--shrink">
        <span class="esf-table__cell-inner">
          <div *ngIf="incRulesSize != i+1; else addIncButton">
          <button class="esf-button esf-button--simple" mat-button               (click)="removeIncludeRule(i)"> 
            <svg class="esf-icon esf-button__icon" width="16" height="16">
              <use xlink:href="#esf-icon-trash-16"></use>
            </svg>
            <span class="esf-button__icon-text"></span>
          </button>
        </div>
        <ng-template #addIncButton>
            <div class="esf-submit-row__item">
                <button class="esf-button esf-button--standard esf-button--filled" (click)="addIncludeRule()" [disabled]="incRulesLimit">Add</button>
              </div>
        </ng-template>
        </span>
      </td>
  </tr>
</tbody>

Answer 1

为什么不使用类型？

为什么你有 [disabled]="irule.type[i] 但类型是字符串并且在你的初始化中你有空值，所以 return OutOfRangeException 在 JavaScript

为什么不从 ngForm 中删除 ngModel？例如：

@ViewChild(NgForm) form : NgForm;
removeExample(index: number){
   let currentControlName: string = `iruleValue${i}`
   let control:NgModel = this.form.controls[currentControlName];
   control && this.form.removeControl(control)
   this.campaign.includeRules.splice(i, 1)
   this.changeDetectorRef.detectChanges()
}

Answer 2

您需要使用 trackBy 让 angular 知道跟踪索引，因此对于您的迭代，只需添加：

*ngFor="let irule of campaign.includeRules; index as i; trackBy: myTrackByFn"

并在组件中：

myTrackByFn(index) {
  return index;
}

如何在 angular 中正确删除 html table 元素？

how to Remove html table element properly in angular?

html-table

typescript

ngfor

ngmodel

angular