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

问题描述 投票:1回答:1

我正在尝试在我的网站上创建一个用户管理表。该表工作得很好,现在我正在尝试在每行上添加按钮,以便删除行。

但是,当我单击一个按钮时,没有任何反应。使用调试器,我可以看到已删除绑定到表的数组的行,但表总是显示它。

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>

TypeScript:

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
}

html angular typescript ngfor
1个回答
3
投票

你需要管道转换()来解雇。尝试交换以下内容,重新分配应该调用它。

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);
© www.soinside.com 2019 - 2024. All rights reserved.