Question

我已经设置了一个从标准UL / LI列表中运行良好的ModalComponent。然而，现在我们已经从下面的链接实现了Datatables数据网格。它使用javascript绑定。我的服务成功加载网格，但因为我只能通过data属性加载它，我必须使用internall列绑定。这意味着我的标记是通过其渲染选项的静态html。

link：https://datatables.net/

因此，下面的典型（点击）事件不会触发：

$('#sarDatatable').DataTable( {
        pagingType: 'full_numbers',
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'All']],
        data: this.sars,
        columns: [
            { title: 'SAR Id', data: 'sarSid', type: 'num' },
            { title: 'Intake Date', data: 'formTimeStamp', type: 'date' },
            { title: 'Agency', data: 'agencyName' },
            { title: 'Synopsis', data: 'subjectAdditionalIdentifiers', width: '30%' },
            { title: 'Priority', data: 'sarRecordId', type: 'num' },
            { title: 'Actions', render: function (data, type, row, meta) {
                return '<button **(click)="modal1.show(sar.sarsId)"** class="btn btn-simple btn-info btn-icon eye"><i class="ti-eye"></i></button>';
              }
            }
        ],
        responsive: true,
        language: {
          search: '_INPUT_',
            searchPlaceholder: 'Search records',
        }
      });

所以，我必须声明一个带有对数据表对象的引用的变量，并根据元素的样式绑定一个click事件（在本例中为“eye”类）。

警报工作正常。问题是现在我无法调用我的ModalComponent的show（）方法！我尝试使用@ViewChild或局部变量选项进行组件到组件的交互，但找不到实例。它也找不到本地方法showModal（）。

core.es5.js:1020 ERROR TypeError: Cannot read property 'show' of undefined
    at HTMLButtonElement.eval (unvetted.component.ts:64)
    at HTMLTableElement.dispatch (scripts.bundle.js:5226)
    at HTMLTableElement.elemData.handle (scripts.bundle.js:4878)
    at ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.invokeTask (zone.js:397)
    at Zone.runTask (zone.js:165)
    at HTMLTableElement.ZoneTask.invoke (zone.js:460)

我对此的看法是即使它是TS .on（函数（...也无权访问该组件。我如何实现这一目标？

我的父母组件

export class UnvettedComponent implements OnInit {
  @ViewChild(SarQuickviewComponent)
  private sarQuickview: SarQuickviewComponent;
  sars: SAR[] = [];
  someValue:String = 'xxxx';

  constructor(private _sarService: SARService) { }

  ngOnInit() {
    console.log('ngOnInit');
    this.getSARS();
  }

  getSARS() {
    console.log('getSARS');
    this._sarService.getSARS()
    .subscribe(sars => {
      this.sars = sars;

      console.log(this.sars);
      $('#sarDatatable').DataTable( {
        pagingType: 'full_numbers',
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'All']],
        data: this.sars,
        columns: [
            { title: 'SAR Id', data: 'sarSid', type: 'num' },
            { title: 'Intake Date', data: 'formTimeStamp', type: 'date' },
            { title: 'Agency', data: 'agencyName' },
            { title: 'Synopsis', data: 'subjectAdditionalIdentifiers', width: '30%' },
            { title: 'Priority', data: 'sarRecordId', type: 'num' },
            { title: 'Actions', render: function (data, type, row, meta) {
                return '<button class="btn btn-simple btn-info btn-icon eye"><i class="ti-eye"></i></button>';
              }
            }
        ],
        responsive: true,
        language: {
          search: '_INPUT_',
            searchPlaceholder: 'Search records',
        }
      });

      var table = $('#sarDatatable').DataTable();
      // Edit record
      table.on( 'click', '.eye', function (this) {
        console.log('click eye');
        console.log(this);
          var $tr = $(this).closest('tr');

          var data = table.row($tr).data();
          alert( 'You press on Row: ' + data.sarSid + ' ' + data.agencyName + ' ' + data.title + '\'s row.' );
          this.sarQuickview.show();
      });
    });
  }

  showModal() {
    console.log("hello");
  }
}

我的ModalComponent

export class SarQuickviewComponent implements OnInit {
  @ViewChild('f') userList: NgForm;
  sar: SAR;
  public visible = false;
  private visibleAnimate = false;
  canAccessUserDropdown: boolean;

  users: User[];
  defaultUser: User;

  constructor(private sarService: SARService,
    private userManagementService: UserManagementService,
    private router: Router,
    private role: RoleService) { }

  ngOnInit() {
    this.canAccessUserDropdown = this.role.rolesCantAccess(['Reviewer', 'StaffAnalyst']);
    console.log(this.canAccessUserDropdown);

    this.getUserList('CCIC');
  }

  public show(id: number): void {

    // load sar data before making it visible
    console.log('selected id: ' + id);
    this.getSarDetail(id);
    // now show the modal
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true, 100);
  }

  public hide(): void {
    this.visibleAnimate = false;
    setTimeout(() => this.visible = false, 300);
  }

  public onContainerClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.hide();
    }
  }

  getSarDetail(id: number): void {
    // invoke service to fetch sar details based on id
    this.sarService.getSARDetailForId(id)
      .subscribe(sar => {
        this.sar = sar;
        console.log(this.sar);
      });
  }

  getUserList(orgName: string) {
    this.userManagementService.getActivatedUsersForOrgName(orgName)
    .subscribe(users => {
      this.users = users;
      this.users.forEach(user => {
        if (user.userId === +localStorage.getItem('user_id')) {
          this.defaultUser = user;
        } else {
          this.defaultUser = users[0];
        }
      });
    });
  }

  onSubmit(userList) {
    console.log(userList.value.userData.user.userId);
    // this.router.navigate(['/user-management/users/' + userList.value.userData.user.userId]);
  }

}

Answer 1

尝试在table.on中使用箭头功能（＆＃39;点击＆＃39;，＆＃39; .eye＆＃39;，（event）=＆gt; 箭头功能将上下文保持在定义的位置，因此＆＃39;这个＆＃39;在调用时正确设置

角度组件到组件

1 个答案: