Таблица исчезает после добавления элемента

я использую datatables для отображения списка имен проектов, и я использую кнопку, чтобы добавить элемент в отображаемый массив, но когда я это делаю, моя таблица исчезает.

Вот код:

вид.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>

контроллер.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));
        }
    }
})

Я пробовал использовать объекты вместо строк... тоже не работает. Я не знаю, что происходит. Я не могу использовать обработку на стороне сервера. Это должно быть сделано с помощью углового способа.


javascript angularjs datatables angular-datatables
person Devz    schedule 04.12.2017    source источник
comment
На минимальном примере я не могу воспроизвести вашу проблему. Вот плункер   -  person Aleksey Solovey    schedule 04.12.2017
comment
@AlekseySolovey Я использую angular-datatables, ваш планкер предполагает, что я использую базовый angular.   -  person Devz    schedule 04.12.2017

Ответы (1)


arrow_upward
0
arrow_downward

Итак, я нашел это:

По какой-то причине это сработало, когда я инициализировал vm.project.project перед вызовом обещания. Итак, я создал объект vm.project и добавил к нему свойство project, добавив пустой массив. Затем я смог добавлять элементы, и моя таблица не исчезала.

person Devz    schedule 04.12.2017