如何以角度正确删除 html 表格元素？

Question

我尝试使用添加/删除元素按钮开发动态表。 每行有 2 个单元格 - 1 个被选中的单元格（可以禁用/启用）和输入字段（可能很重要，要明确这一点）。 我使用 Array（存储我的对象）、ngModel 和索引 ngFor 来迭代它。

当我尝试删除元素时出现问题，然后由于某种原因，在我尝试将元素添加到表后，不是所有的数据绑定（不是处于正确的状态，也不是在输入字段中显示）正确，即使所有数据保存得很好。

我以前认为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] 但类型是字符串，在你的初始化中你有空值，所以应该在 JavaScript 中返回OutOfRangeException

为什么不从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;
}