Angular 4数据表

Question

I'm using angular4 datatable with ajax from here : github

All the stuff works fine but i can not bind dynamic ngModel to the my elements

Is there any way to bind ngModel to it. Below is my dt-option configuration and you can see in column title extra there is a model binding.

Please help me with this. Thanks in advance.

this.dtOptions = {
        ajax: {
            url: '/api/users/get_users'
            , dataSrc: 'data'
            , type: "POST"
            , data: {test: 1}
            , headers: {
                //                    Authorization: 'Bearer ' + localStorage.getItem('token')
                Authorization: 'Bearer awdsafsdvaefaa5s4das5d4sa4sadd58a7sd45sa4dsad5a4d5sadasd54sad54d54d5sa4dsa5d4sad54sad5d5sa' + localStorage.getItem('token')
            }
        },
        pagingType: 'full_numbers',
        pageLength: 10,
        serverSide: true,
        processing: true,
        columns: [
            {
                title: '',
                defaultContent: '<input type="checkbox">'
            },
            {
                title: 'ID',
                data: 'id'
            },
            {
                title: 'First name',
                data: 'firstname'
            },
            {
                title: 'Last name',
                data: 'lastname'
            },
            {
                title: 'Status',
                defaultContent: '<button class="btn btn-default btn-xs edit-country-btn">Active</button>'
            },
            {
                title: 'Actions',
                orderable: false,
                searchable: false,
                defaultContent: '<button class="btn btn-default btn-xs edit-country-btn">Edit</button>'
            },
            {
                title: 'Extra',
                orderable: false,
                searchable: false,
                data: function (full, data, row, meta)
                {
                    if (!self.temp)
                    {
                       //dynamic ngModel binding 
                        return '<button [(ngModel)]="dynamic_model[full.id]" [disabled]="true" class="btn btn-default btn-xs edit-country-btn">EXTRA</button>';
                    }
                    else
                    {
                        return '---';
                    }
                }
            },
            {
                title: 'Extra2',
                orderable: false,
                searchable: false,
                defaultContent: ''
            },
            {
                title: 'Extra3',
                orderable: false,
                searchable: false,
                render: function (data, type, row, meta)
                {
                    if (!self.temp)
                    {
                        return '<button [disabled]="true" class="btn btn-default btn-xs edit-country-btn">EXTRA</button>';
                    }
                    else
                    {
                        return '---';
                    }
                }
            }
        ],
        rowCallback: (row: Node, data: any[] | Object, index: number) =>
        {
            const self = this;
            var str = '---';
            var str1 = '<button [disabled]="true" class="btn btn-default btn-xs edit-country-btn">TEST</button>';

            //$('td:nth-child(1) input', row).bind('model', this.checkArr[0]);

            $('td:nth-child(5) button', row).bind('click', () =>
            {
                self.test(data);
            });

            $('td:nth-child(8)', row).append(str1);

            return row;
        }
    };