0

I'm quite confused and need a small guide, I have a component class named ItemsActionsDynamicComponent which using an injecable service called ItemsActionsDynamicService that sending all of the HTTP requests.

Now i used another directive called JquiDialogLauncher, i'm trying to user the ItemsActionsDynamicService when confirmation button is pressed in order to send the HTTP req, while doing it i'm getting Cannot read property 'postSyncItemFromSource' of undefined

ItemsActionsDynamicComponent:

import {Component, ElementRef, Input, ViewChild} from '@angular/core';
import {Http} from "@angular/http";
import {ItemsActionsDynamicService} from "./item-actions-dynamic.service";
import {FadeInTop} from "../../../../shared/animations/fade-in-top.decorator";
import {ModalComponent} from "ng2-bs3-modal/components/modal";


declare var $: any;
@FadeInTop()
@Component({
    selector: 'items-actions-dynamic',
    templateUrl: './items-actions-dynamic.component.html',
    providers: [ItemsActionsDynamicService]
})
export class ItemsActionsDynamicComponent {


    constructor(... private _itemsActionsDynamicService: ItemsActionsDynamicService) {

    }

    ..


    syncItemDialogOptions = {
        autoOpen : false,
        width : 600,
        resizable : false,
        modal : true,
        closeText: '',
        title : "<div class='widget-header'><h4><i class='fa fa-warning'></i> Sync Item</h4></div>",
        buttons : [{
            html : "<i class='fa fa-trash-o'></i>&nbsp; Ok",
            "class" : "btn btn-danger",
            click : function() {
                this._itemsActionsDynamicService.postSyncItemFromSource();
                $(this).dialog("close");
            }
        }, {
            html : "<i class='fa fa-times'></i>&nbsp; Cancel",
            "class" : "btn btn-default",
            click : function() {
                $(this).dialog("close");
            }
        }]
    };

    public syncItem() {
        console.log("syncItem")
        this._itemsActionsDynamicService.postSyncItemFromSource(itemUUID);
    }

}

items-actions-dynamic.component.html :

<button class="btn btn-default btn-xs"  (click)="syncItem()">Test Sync Item</button>

<button class="btn btn-default btn-xs"  saJquiDialogLauncher="#sync-item-dialog">Sync Item</button>

<div id="sync-item-dialog" [saJquiDialog]="syncItemDialogOptions">
</div>

JquiDialogLauncher:

@Directive({
  selector: '[saJquiDialogLauncher]'
})
export class JquiDialogLauncher {
  @Input() saJquiDialogLauncher: any;

  @HostListener('click', ['$event']) onClick(e) {
    $( this.saJquiDialogLauncher ).dialog( "open" );
  }

  constructor(private el: ElementRef) { }

}

when clicking on Test Sync Item, everything is working well, when clicking on Sync Item im getting cannot read property 'postSyncItemFromSource' of undefined

In order to make Sync Item works, what shell i do? inject the ItemsActionsDynamicService into JquiDialogLauncher directive? if so how do i use the method then?

eko
  • 39,722
  • 10
  • 72
  • 98
USer22999299
  • 5,284
  • 9
  • 46
  • 78
  • @echonax not really, went over it and seems like its slightly different, i need to pass the option into the directive from the component therefore the "this" trick with the local function var not working... – USer22999299 May 19 '17 at 12:20
  • 1
    Makes no difference, the answers to the question @echonax pointed at explain what's going on here and how you fix it. In your `.btn.btn-danger` click handler, you're trying to use `this` for two separate things. You can't do that. Either use an arrow function and `$(e.target).close()` (being sure to accept the event parameter), or use `var component = this;` prior to the `syncItemDialogOptions =` line and then use `component._itemsActionsDynamicService.postSyncItemFromSource();`. Both of these, and several others, are covered in detail. – T.J. Crowder May 19 '17 at 14:12

0 Answers0