Question

我希望在单击表中的删除行时更新页面html。我使用了AngularJs 2.0的代码，但没有更新到页面html。请帮帮我。非常感谢你！

Shipping.Component.html

 `<div class="example table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Giá trị đơn hàng</th>
                            <th>Giá ship</th>
                            <th>Xóa</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let row of shipping.shipping_config; let i=index">
                            <td>
                                <input type="number" class="form-control fromgtdonhang gtdonhang" [(ngModel)]="row.from" placeholder="Từ">

                                <input type="number" class="form-control gtdonhang" [(ngModel)]="row.to" placeholder="Đến">
                            </td>
                            <td>
                                <input type="number" class="form-control" [(ngModel)]="row.shipping_fee" placeholder="Giá ship">
                            </td>
                            <td class="formatremove">
                                <a href="javascript:void(0)" (click)="removeKhunggia(i)"> 
                                    <i class="icon wb-close" aria-hidden="true"></i></a>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" class="formatbuttonadd">
                                <button type="button" (click)="addKhunggia()" class="btn btn-outline btn-primary">
                                    <i class="icon wb-plus" aria-hidden="true"></i> Thêm
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>`

在Shipping.component.ts中：

 `ngOnInit() {
        this.shippingService.getShopingConfig().subscribe(res => {
            this.shipping = res;
            this.rowsShippingConfig = res.shipping_config;
        });
    } 
removeKhunggia(id: number) {
        this.rowsShippingConfig.slice(id,-1);
    }`

Answer 1

您需要在删除后分配值，

removeKhunggia(id: number) {
  this.rowsShippingConfig =   this.rowsShippingConfig.slice(id,1);
}

Answer 2

函数slice返回新数组，原始数组不会被修改。因此，您可能希望在splice中使用removeKhunggia，如下所示：

removeKhunggia(id: number) {
 this.rowsShippingConfig.splice(id, 1);
}

删除表格中的任何行使用angular2

2 个答案: