I've been on angularJs for a while now and I just switched over to angular 2. I'm calling a popover from a page and when an item is selected from the popover, I'm supposed to get some data from an api. The problem I'm having is, when I use 'this', it no longer references the Vendor context so I'm unable to access the VendorServices functions. Is there a way to reference the parent class(the page calling the popover) so I get all it's variables?
我已经在angularJs上呆了一段时间了,我刚刚切换到了角度2.我正在从一个页面调用一个弹出框,当从弹出框中选择一个项目时,我应该从api获取一些数据。我遇到的问题是,当我使用'this'时,它不再引用Vendor上下文,因此我无法访问VendorServices函数。有没有办法引用父类(调用popover的页面)所以我得到它的所有变量?
import { Component } from '@angular/core';
import { VendorService} from '../vendors/services'
import { NavController, NavParams } from 'ionic-angular';
import { Meals } from '../meals/meals';
import { PopoverController } from 'ionic-angular';
import { LocationsPopover } from '../locations-popover/locations-popover';
@Component({
selector: 'vendors',
templateUrl: 'vendors.html'
})
export class Vendors {
mealsPage = Meals;
public locationName: string;
vendors: any;
selectedLocation:String;
constructor(public navCtrl: NavController, public params:NavParams, private vendorService:VendorService, public popoverController: PopoverController) {
this.locationName = params.get('location');
}
this is the function that handles the popover:
这是处理弹出窗口的函数:
showLocationsDropdown(event){
console.log("locations");
let popover = this.popoverController.create(LocationsPopover,{
cb:function(location){
this.selectedLocation = location.location_name;
console.log("selectedLocation", location.location_name);
// this.vendorService.getVendorsByLocationId(location.id).subscribe(
this.vendorService.getVendors().subscribe(
results=>{
console.log(results);
this.vendors = results;
}
);
}
});
popover.present({
ev:event
});
}
这是我得到的错误
1 个解决方案
#1
2
If you use function(location){
like that then the enclosing scope of the this
inside the function will be the functions "instance". You can do something like (location)=>{
to access the lexical this
如果使用函数(位置){那样那么函数内部的封闭范围将是函数“instance”。你可以做一些像(location)=> {来访问这个词汇
showLocationsDropdown(event){
console.log("locations");
let popover = this.popoverController.create(LocationsPopover,{
cb:(location)=>{
this.selectedLocation = location.location_name;
or assign the lexical this
to a variable (like self
) the old way and use that variable if you don't want to lose the this
inside the function
或者将lexical分配给变量(如self)旧方法并使用该变量如果你不想在函数内部丢失它
showLocationsDropdown(event){
console.log("locations");
var self = this; //<-- assign here
let popover = this.popoverController.create(LocationsPopover,{
cb:function(location){
self.selectedLocation = location.location_name; //<-- use here
#1
2
If you use function(location){
like that then the enclosing scope of the this
inside the function will be the functions "instance". You can do something like (location)=>{
to access the lexical this
如果使用函数(位置){那样那么函数内部的封闭范围将是函数“instance”。你可以做一些像(location)=> {来访问这个词汇
showLocationsDropdown(event){
console.log("locations");
let popover = this.popoverController.create(LocationsPopover,{
cb:(location)=>{
this.selectedLocation = location.location_name;
or assign the lexical this
to a variable (like self
) the old way and use that variable if you don't want to lose the this
inside the function
或者将lexical分配给变量(如self)旧方法并使用该变量如果你不想在函数内部丢失它
showLocationsDropdown(event){
console.log("locations");
var self = this; //<-- assign here
let popover = this.popoverController.create(LocationsPopover,{
cb:function(location){
self.selectedLocation = location.location_name; //<-- use here