删除绑定数组中的一行后刷新表?

Posted

技术标签:

【中文标题】删除绑定数组中的一行后刷新表?【英文标题】:Refresh a table after removing a row in the binded array? 【发布时间】:2019-09-17 20:58:08 【问题描述】:

我正在尝试在我的网站上创建一个用于用户管理的表。该表完美运行,现在我正在尝试在每行上添加按钮以提供删除行的可能性。

但是,当我连续单击一个按钮时,什么也没有发生。使用调试器,我可以看到绑定到表的数组中的行已被删除,但表始终显示它。

html

<tr *ngFor="let user of users |  filter : usersProperties : searchString; let id = index">
          <th class='UId'>user.uId</th>
          <th class='Username' contenteditable="true" (keyup)="changeValue(id, 'name', $event)" (blur)="updateList(id, 'name', $event)">user.userName</th>
          <th class='Prenom' contenteditable="true" (keyup)="changeValue(id, 'name', $event)" (blur)="updateList(id, 'name', $event)">user.uFirstName</th>
          <th class='Nom' contenteditable="true" (keyup)="changeValue(id, 'name', $event)" (blur)="updateList(id, 'name', $event)">user.uLastName</th>
          <th class='Admin' contenteditable="true" (keyup)="changeValue(id, 'name', $event)" (blur)="updateList(id, 'name', $event)">user.uIsAdmin</th>
          <th class='suppr'>
            <span class="table-remove">    
              <!-- Her it's the butto for delete the row -->
              <button type="button" class='btn btn-outline-danger my-2 my-sm-0 shadow-sm' (click)="remove(id)">Remove</button>
            </span>
          </th>
        </tr>

打字稿:

remove(id: number) 
    this.deleteddrow = []
    if(this.users[id] != null)
      this.deleteddrow.push(this.users[id]);
      this.users.splice(id, 1);
    
  

(我将删除的行保存在一个数组中以更新我的数据库)

编辑: 用户对象使用模型:

export class UserModel
    uId : Number
    userName: string
    uFirstName: string
    uLastName: string
    uPassword: string
    uIsAdmin: boolean


【问题讨论】:

【参考方案1】:

你需要 pipe transform() 来触发。尝试交换以下内容,重新分配应该调用它。

this.users.splice(id, 1);

为以下。您可能不应该将 index 作为 id 传递,但以下内容应该有所帮助。

this.users = this.users.filter(data => data !== this.users[id]);

它与执行此操作相同,但如前所述应触发transform()

let x = [1, 2, 3];

x = x.filter(data => data !== x[1]);
console.log(x);

【讨论】:

您的回答可能会解决问题,但解释不正确。当您为 Object 提供新引用时,不会在按钮单击时触发更改检测。由于用户正在使用的管道可能是pure 管道,因此除非检测到新的引用,否则transform() 将不会运行。另一种解决方案可能是使其成为不纯的管道。我相信提供一个新的参考是一个更好的选择。 你让我保持警惕,我认为对 Object 的新引用会使更改检测运行。 row.id 不是已知元素。我的数组使用模型,用户:UserModel[]; 我修改了我的帖子。我在模型中有一个 id,但它与数组的索引不同 非常感谢,它的工作!我只需要插一个括号,说你的帖子太多了

以上是关于删除绑定数组中的一行后刷新表?的主要内容,如果未能解决你的问题,请参考以下文章

删除firebase中的数据后如何刷新TableViewCell?

如何使用淘汰赛绑定表中的内部数组

datagridview行删除时,之前都能删除,但就是最后一行删除时,数据库删除了,但datagridview却还显示它。

尝试删除 NSUserdefault 数组中的表视图行

我想用C#中的datagrid控件做一个删除行(点击按钮删除datagrid中的所指定的任意一行)

android如何删除gridview中的某个item