Как правильно удалить HTML элемент таблицы в угловых? - PullRequest
Новая
       24

Как правильно удалить HTML элемент таблицы в угловых?

0 голосов
/ 17 января 2019

Я пытаюсь разработать динамическую таблицу с помощью кнопки Добавить / Удалить элемент. В каждой строке есть 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>

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Вам нужно использовать trackBy, чтобы angular узнал, как отслеживать индекс, поэтому для вашей итерации просто добавьте: 

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

и в компоненте: 

myTrackByFn(index) {
  return index;
}
0 голосов
/ 18 января 2019

Почему вы не используете типы?

Почему у вас [disabled]="irule.type[i], но type это string и в вашей инициализации у вас есть пустое значение, поэтому должно возвращаться OutOfRangeException в JavaScript

Почему вы не удалили ngModel из ngForm? e.g.:

@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()
}
...