0

elementvariableの値を_dataTableコンポーネントdatatable.component.tsから (render()関数から) 取得して、新しいボタンの新しいイベントを作成したいと思いますelement.on。または、このコンポーネント内に新しい関数を作成します。DatatableComponentと を介して要素にアクセスする方法に問題がCzas-PracyModuleありSmartadminModuleます。DatatableComponentdouble を直接省略してこれを行うことができますNgModuleが、変数undefinedの値は明らかです。ここから入手したいczas-pracy.component.ts

以下は、コンポーネントの構造と最も重要なファイルのコードです

App structure:
../+czas-pracy
../+czas-pracy/czas-pracy.component.ts
../+czas-pracy/czas-pracy.module.ts

../share/ui/database/
../share/ui/database/smartadmin-database.module.ts
../share/ui/database/datatable.component.ts

datatable.component.ts

import {Component, Input, ElementRef, AfterContentInit, OnInit} from '@angular/core';

declare var $: any;

@Component({

  selector: 'sa-datatable',
  template: `
      <table class="dataTable responsive {{tableClass}}" width="{{width}}">
        <ng-content></ng-content>
      </table>
`,
  styles: [
    require('smartadmin-plugins/datatables/datatables.min.css')
  ]
})
export class DatatableComponent implements OnInit {
  _dT : any;  
  @Input() public options:any;
  @Input() public filter:any;
  @Input() public detailsFormat:any;

  @Input() public paginationLength: boolean;
  @Input() public columnsHide: boolean;
  @Input() public tableClass: string;
  @Input() public width: string = '100%';

  constructor(private el: ElementRef) {
  }

  ngOnInit() {
    Promise.all([
      System.import('script-loader!smartadmin-plugins/datatables/datatables.min.js'),
    ]).then(()=>{
      this.render()

    })
  }

  render() {
    let element = $(this.el.nativeElement.children[0]);
    let options = this.options || {}


    let toolbar = '';
    if (options.buttons)
      toolbar += 'B';
    if (this.paginationLength)
      toolbar += 'l';
    if (this.columnsHide)
      toolbar += 'C';

    if (typeof options.ajax === 'string') {
      let url = options.ajax;
      options.ajax = {
        url: url,
        // complete: function (xhr) {
        //
        // }
      }
    }

    options = $.extend(options, {

      "dom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" + toolbar + ">r>" +
      "t" +
      "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
      oLanguage: {
        "sSearch": "<span class='input-group-addon'><i class='glyphicon glyphicon-search'></i></span> ",
        "sLengthMenu": "_MENU_"
      },
      "autoWidth": false,
      retrieve: true,
      responsive: true,
      initComplete: (settings, json)=> {
        element.parent().find('.input-sm', ).removeClass("input-sm").addClass('input-md');
      }
    });

    const _dataTable = element.DataTable(options);
    this._dT = _dataTable;
    console.log(_dataTable);

      if (this.filter) {
      // Apply the filter
      element.on('keyup change', 'thead th input[type=text]', function () {
        _dataTable
          .column($(this).parent().index() + ':visible')
          .search(this.value)
          .draw();
      });
    }
    if (!toolbar) {
      element.parent().find(".dt-toolbar").append('<div class="text-right"><img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>');
    }
    if(this.detailsFormat){
      let format = this.detailsFormat
      element.on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = _dataTable.row( tr );
        if ( row.child.isShown() ) {
          row.child.hide();
          tr.removeClass('shown');
        }
        else {
          row.child( format(row.data()) ).show();
          tr.addClass('shown');
        }
      })
    }
  }
  _dataTable1(){
   console.log( this._dT);
   console.log('dT');
  }
}

smartadmin.datatable.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatatableComponent } from './datatable.component';

// require('smartadmin-plugins/bower_components/datatables.net-colreorder-bs/css/colReorder.bootstrap.min.css');

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [DatatableComponent],
  exports: [DatatableComponent],
})
export class SmartadminDatatableModule { }

czas-pracy.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { czasPracyRouting } from './czas-pracy.routing';
import {CzasPracyComponent} from "./czas-pracy.component";
import {I18nModule} from "../../i18n/i18n.module";

import {SmartadminModule} from "../shared/smartadmin.module";
import {SmartadminDatatableModule} from "../shared/ui/datatable/smartadmin-datatable.module";

 import { DatatablesRestDemoComponent } from '../+tables/+datatables-showcase/datatables-rest-demo.component';
import { ModalModule } from 'ngx-bootstrap/modal/modal.module';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    czasPracyRouting,
    SmartadminModule,
    SmartadminDatatableModule,
    ModalModule.forRoot(),
    FormsModule,
  ],
  declarations: [
    CzasPracyComponent,
    DatatablesRestDemoComponent,
  ],
  providers: [
  ]
})
export class CzasPracyModule { }

私は多くの方法を試しましたが、何もうまくいきません...私はどんな提案や解決策にも感謝します. ありがとう。ご挨拶

4

1 に答える 1