Remove Dynamic row in Angular

Question

I am trying to delete dynamic <tr> using Angular. But my test was not successful.
I can't find what is the error for this.

page.component.html

<tr *ngFor="let row of selectedOptions$ | async; let i =index;">
   <td>{{ row.code.value }}</td>
   <td>{{ row.desc.value }}</td>
   <td>{{ row.amount }}</td>
   <td style="float: right">
      <button type="button" class="btn btn-secondary btn-sm waves-effect waves-light" data-toggle="modal" data-target="#formemodal"><i class="fa fa-edit"></i> Edit</button>
      <button type="button" class="btn btn btn-sm waves-effect waves-light delete"><i class="fa fa-bitbucket" (click)="deleteRow(i)">Delete</i></button>
   </td>
</tr>

page.component.ts

selectedOptions$ = new BehaviorSubject([]);
constructor() { }

ngOnInit(){
}

deleteRow(index) {  
  if(this.selectedOptions$.value.length ==1) {
      return false;  
  } else {
      this.selectedOptions$.value.splice(index, 1); 
  }  
}

Pierre D · Accepted Answer · 2019-08-26 07:29:21Z

1

Your subject is not updated.

Try changing this

this.selectedOptions$.value.splice(index, 1);

With

const newContent = this.selectedOptions$.value.splice(index, 1); 
this.selectedOptions$.next(newContent);

answered Aug 26, 2019 at 7:29

Pierre D

768 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LppEdd · Accepted Answer · 2019-08-26 07:36:28Z

1

You should not directly act on the BehaviorSubject value property, as it is an anti-pattern.
Instead, next() a new array.

const slicedArray = this.yourArray.slice(1);
this.selectedOptions$.next(slicedArray);

As you can see I've also used slice, to produce a new array reference, instead of modifying the old one.

edited Aug 26, 2019 at 7:36

answered Aug 26, 2019 at 7:29

LppEdd

21.3k12 gold badges90 silver badges161 bronze badges

Collectives™ on Stack Overflow

Remove Dynamic row in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related