angular2 jquery UI可以使用模型更新进行排序

Question

创建了一个具有数据数组的组件，并使用jquery UI进行排序。 Pfb组件代码。

import { Component, AfterViewInit  } from '@angular/core';
declare var $:any;

@Component({
  selector: 'app-requirement-details',
  templateUrl: './requirement-details.component.html',
  styleUrls: ['./requirement-details.component.css']
})
export class RequirementDetailsComponent implements AfterViewInit  {

    private tableDatas = [
        {
            name:'Sameer',
            age: '20'
        }, {
            name:'Nithya',
            age: '30'
        }, {
            name:'Dinesh',
            age: '25'
        }, {
            name:'Ramesh',
            age: '40'
        }, {
            name:'Prabhu',
            age: '32'
        }, {
            name:'Gopal',
            age: '35'
        }, {
            name:'Irshad',
            age: '36'
        }, {
            name:'Puhal',
            age: '33'
        }, {
            name:'Rajagopal',
            age: '38'
        }, {
            name:'Sakthi',
            age: '35'
        }
    ];

    constructor() { }


    ngAfterViewInit () {
        let component = this;
        $(".rTableBody").sortable({
            axis: "y",
            cursor: "move",
            handle: ".handle",
            opacity: 0.6,
            helper: function(e, item) {
                console.log("Parent-Helper: ", item);
                if (!item.hasClass("ui-selected")) {
                    //item.addClass("ui-selected");
                }
                // Clone selected elements
                var elements = $(".ui-selected").not('.ui-sortable-placeholder').clone();
                console.log("Making helper: ", elements);
                // Hide selected Elements
                item.siblings(".ui-selected").addClass("hidden");
                var helper = $("<div class='rTable' ><div class='rTableBody'></div></div>");
                helper.append(elements);
                console.log("Helper: ", helper);
                return helper;
            },
            start: function(e, ui) {
                var elements = ui.item.siblings(".ui-selected.hidden").not('.ui-sortable-placeholder');
                ui.item.data("items", elements);
            },
            update: function(e, ui) {
                console.log("Receiving: ", ui.item.data("items"));
                $.each(ui.item.data("items"), function(k, v) {
                    console.log("Appending ", v, " before ", ui.item);
                    ui.item.before(v);
                });
            },
            stop: function(e, ui) {
                ui.item.siblings(".ui-selected").removeClass("hidden");
                $(".ui-selected").removeClass("ui-selected");
            }
        })
        .selectable({
            filter: ".rTableRow",
            cancel: ".handle"
        })

    }

}

和下面的模板代码

<div class="rTable">
    <div class="rTableRow head">
        <div class="rTableHead" style="width:5%;"><strong>SI.No</strong></div>
        <div class="rTableHead"><span style="font-weight: bold;">Name</span></div>
        <div class="rTableHead">Age</div>
    </div>
    <div class="rTableBody">
        <div class="rTableRow" *ngFor="let data of tableDatas; let i = index;">
            <div class="rTableCell"><div class="handle"></div>{{i+1}}</div>
            <div class="rTableCell">{{data.name}}</div>
            <div class="rTableCell">{{data.age}}</div>
        </div>
    </div>
</div>

表排序工作正常，但我需要的是表格排序我的组件模型变量也应该排序。我尝试了很多东西，但还有帮助。

请给我一些解决方案。

提前致谢。