Question

我使用数据表来显示项目名称列表，并且我使用按钮将项目添加到显示的数组中，但是当我这样做时，我的表格就会消失。

以下是代码：

view.html

<button ng-click="vm.add()">Add item</button>
<table datatable="ng" dt-instance="vm.dtInstance" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs"
       class="table table-hover table-striped table-bordered table-condensed">
    <thead>
    <tr style="background-color: #00b3ee; color: white; border:none">
        <th style="text-align: center">Nom</th>
        <th style="text-align: center">Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="project in vm.project.projects">
        <td style="width: 90%; vertical-align: middle">{{project}}</td>
        <td align="center" style="vertical-align: middle">
            <button data-toggle="modal" ng-click="vm.setProject(project)"
                    data-target="#deleteEureciaProjectModal" type="button" class="btn btn-danger">
                <i class="fa fa-trash">&nbsp;&nbsp;</i>Supprimer
            </button>
        </td>
    </tr>
    </tbody>
</table>

controller.js

vm.add = () => vm.project.projects.push('new project');

fetchProject().then(result => {
    vm.project = result;

    // vm.project = {
    //     projects: [
    //         "project1",
    //         "project2",
    //         "project3",
    //         "project4"
    //     ],
    //     etc...
    // }

    vm.project.projects.push("newProject"); //it's working here, which is normal

    //init datatable
    vm.dtInstance = {};
    vm.dtOptions = DTOptionsBuilder.newOptions()
        .withBootstrap();
    vm.dtColumnDefs = [];
    for (var i = 0; i < 2; i++) {
        if (i == 1) {
            vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i).notSortable());
        } else {
            vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i));
        }
    }
})

我尝试过使用对象而不是字符串..它也不起作用。我不知道发生了什么。我不能使用服务器端处理。这必须使用角度方式完成。

Answer 1

好的，我找到了它：

出于某种原因，当我在promise呼叫之前初始化vm.project.project时它起作用了。所以我创建了vm.project对象，并通过添加一个空数组向其添加了project属性。然后，我可以添加项目而不会让我的桌子消失。

添加项目后表格消失

1 个答案: