Base solution for your next web application
Open Closed

Angular Variables and Phonebook Service #3271

User avatar
0
btg created

Hello,

I am trying to get a a button click event, similar to the code in the Angular 2 Phonebook Example to work. I have adapted code from the phonebook.component.ts and phonebook.component.html files. I am trying to call dataSource from one function to the other, but I don't know how to do it since they are both local variables. Does anyone have any ideas on how to deal with this?

Thanks for your help!

phonebook.component.ts

ngOnInit(): void {
        this.getData();


        this.loadDataView();

    }

 loadData(data: DataListDto): string {
        var dataid = data.id;
        var slid = dataid.toString() + ".jpg";
        var url = "http://localhost:4000/";

        var dataSource = url.concat(slid)

        this.message.confirm(
            this.l('ReadyToView', data.name),
            isConfirmed => {
                if (isConfirmed) {
                    this.notify.info(this.l('SuccessfullyLoaded'));
                   dataSource = url.concat(slid);
                }
            }
        );
        return dataSource;
    }

loadDataView(): void {
view.open(dataSource)
}

phonebook.component.html

<span class="slide-buttons">
                      <button (click)="loadSlide(slide)" title="{{l('View')}}" class="btn btn-circle btn-icon-only blue" href="javascript:;">
                        <i class="icon-plus"></i>
                      </button>
                    </span>
Go to accepted answer
3 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    If I understand correctly, you already return a value from getData function. So, you can use it like this.

    var url=  this.getData();
this.loadDataView(url);

    Of course, you need to change loadDataView like this

    loadDataView(url: string): void {
view.open(url)
}
  • User Avatar
    0
    btg created

    Closer, but the button doesn't work and I get the following error. Am I passing a parameter incorrectly, or not doing something right with the Dto?

    core.es5.js:1084 ERROR TypeError: Cannot read property 'open' of undefined

    .

    This is what I have now:

    ngOnInit(): void {
        this.getLake();

        var dataSource = this.loadData(dataSource);
        this.loadView(dataSource);

       
    

 getLake(): void {
        this._dataService.getLake(this.filter).subscribe((result) => {
            this.Lake = result.items;
        });
    }

    loadData(data: DataListDto): string {
        var dataid = "foo";
        var data = dataid.toString();
        var dataext = ".jpg";
        var url = "http://localhost:4000/;

        var dataSource = url.concat(data, dataext);
    
        return dataSource;
    }

    loaddataModal(data: DataListDto) {
        var dataSource = this.loadData(dataSource);
        var url = this.loadData(url);
        var data = this.loadData(data);
        var dataext = this.loadData(dataext);
        var view = this.loadView(view);

        this.message.confirm(
            this.l('ReadyToView', "data.name"),
            isConfirmed => {
                if (isConfirmed) {
                    this.notify.info(this.l('SuccessfullyLoaded'));
                    dataSource = url.concat(data, dataext);
                    view.open(dataSource)
                }
            }
        );
    }

    loadViewer(dataSource: string): void {

        var view = new Viewer({
            ...
        });
       
        });
    }
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Instead of defining your viewer locally like this

    var view = new Viewer

    You need to first define it globally in your component.

    view:Viewer = new Viewer();

    Then you can use it in the way you want I think.

    Thanks.

Assignee
No one
Labels
Non yet