删除绑定数组中的一行后刷新 table?
Refresh a table after removing a row in the binded array?
我正在尝试为我的网站上的用户管理创建一个 table。 table 工作完美,现在我正在尝试在每一行上添加按钮以提供删除行的可能性。
但是,当我连续点击一个按钮时,没有任何反应。使用调试器,我可以看到绑定到 table 的数组的行已被删除,但 table 始终显示它。
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
}
您需要管道 transform() 才能触发。尝试交换以下内容,重新分配应该调用它。
this.users.splice(id, 1);
以下内容。您可能不应该将索引作为 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);
我正在尝试为我的网站上的用户管理创建一个 table。 table 工作完美,现在我正在尝试在每一行上添加按钮以提供删除行的可能性。
但是,当我连续点击一个按钮时,没有任何反应。使用调试器,我可以看到绑定到 table 的数组的行已被删除,但 table 始终显示它。
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
}
您需要管道 transform() 才能触发。尝试交换以下内容,重新分配应该调用它。
this.users.splice(id, 1);
以下内容。您可能不应该将索引作为 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);