Angular Variables and Phonebook Service #3271 | Support Center

btg created 7 years ago

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>

3 Answer(s)

0
ismcagdas created 7 years ago
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) }

btg created 7 years ago

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({
            ...
        });
       
        });
    }

0
ismcagdas created 7 years ago
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.

Have an answer to this question? Log in and write your answer.