Question

我正在尝试使用Angular删除动态<tr>。但是我的测试没有成功。
我找不到这是什么错误。

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); 
  }  
}

Answer 1

您的主题未更新。

尝试更改此内容

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

使用

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

Answer 2

您不应该直接对BehaviorSubject value属性执行操作，因为它是反模式。
相反，next()是新的array。

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

您可以看到，我还使用slice来生成新的数组引用，而不是修改旧的数组引用。

删除Angular中的动态行

2 个答案: