Question

我正在尝试创建一个显示数据的组件。

在我的Parent Component我正在创建一个配置obj，它将传递给ItemViewer Component

export class ProcessListComponent implements OnInit {

process_list: any;
configObj: {};

constructor(public http: HttpClient){}

ngOnInit() {
    // this is the config Obj
    this.configObj = {
        data : this.getAll,
        fields : {
            title : 'Id',
            body :[
                { name : 'Name' , field : 'name'},
                { name: 'Final Material', field : 'final_material'},
                { name : 'Rivision' , field : 'revision'}
            ]
        },
        selectionChanged : this.selectionChangeDetection
    }
}

selectionChangeDetection(item){
    alert(item)
    // some events here, some actions here related to visiblity
}

// function to fetch Obj List
getAll(option: string) {
    // console.log(this)
    return (function(extra_option: string){
        const url: string = 'http://localhost:3000/process_list' + extra_option;
        return this.http.get(url);  // <-- Error comes at this line. How to handle it ??
    })(option);
}
}

我将此obj传递给ItemViewer Component并按如下方式处理：

export class ItemViewerComponent implements OnInit {
@Input() config;
constructor(private http: HttpClient) { }

ngOnInit() {
    this.config.selectionChanged('it works'); // <-- This function works
    this.config.data()
        .subscribe(data => console.log(data)); // <-- Error here
}

}

现在，当我运行这个时，我得到了

ProcessListComponent.html：1 ERROR TypeError：无法读取属性＆＃39; http＆＃39;未定义的 at process.list.component.ts：40 at Object.webpackJsonp ... / .. / .. / .. / .. / src / app / features / process / list / process.list.component.ts.ProcessListComponent.getAll [as data]（process.list。 component.ts：41）在ItemViewerComponent .webpackJsonp ... / .. / .. / .. / .. / src / app / common / ICV / icv.component.ts.ItemViewerComponent .ngOnInit（item-viewer.component.ts:14） at checkAndUpdateDirectiveInline（core.es5.js：10843） at checkAndUpdateNodeInline（core.es5.js：12341） at checkAndUpdateNode（core.es5.js：12284）在debugCheckAndUpdateNode（core.es5.js：13141）在debugCheckDirectivesFn（core.es5.js：13082）在Object.eval [as updateDirectives]（ProcessListComponent.html：1） at Object.debugUpdateDirectives [as updateDirectives]（core.es5.js：13067）

现在，我知道我收到此错误是因为this没有http var ProcessListComponent。

当我在 Angular1.X 中使用该应用程序并且我曾经传递

时，用于与$http一起使用的相同配置

 function getAll(option) {
            return (function (ur_option){
                return $http.get('http://XYZ&units=metric&'+ur_option)
            })(option)
        }

更新

感谢ConnorsFan＆amp; Radonirina Maminiaina：以下代码工作

getAll = (option: string) => {
   return ((extra_option: string) => {
       const url: string = 'http://localhost:3000/process_list' + extra_option;
       return this.http.get(url);
    })(option);
 }

Answer 1

如果要保留this上下文，则必须使用箭头功能。

箭头是使用=＆gt;的函数速记。句法。他们是语法上类似于C＃，Java 8和C中的相关功能 CoffeeScript的。它们支持表达式和语句体。 与函数不同，箭头与它们共享相同的词法this 周围的代码。如果箭头在另一个函数内，它共享其父函数的“arguments”变量。

getAll(option: string) {
    // console.log(this)
   return ((extra_option: string) => {
       const url: string = 'http://localhost:3000/process_list' + extra_option;
       return this.http.get(url);  // <-- Error comes at this line. How to handle it ??
    })(option);
 }

或者您必须将其保存到变量中：

getAll(option: string) {
    // console.log(this)
    let $this = this;
    return (function(extra_option: string){
        const url: string = 'http://localhost:3000/process_list' + extra_option;
        return $this.http.get(url);  // <-- Error comes at this line. How to handle it ??
    })(option);
}

您可以找到更多解释here。

<强>更新：当您拨打getAll方法时，您将执行以下操作：

this.getAll('options')()

或者我错了？

那么为什么要这样做：

getAll(option: string) {
    const url: string = 'http://localhost:3000/process_list' + option;
    return this.http.get(url);
}

或者我不明白你想做什么？

＆＃34;这＆＃34;将函数从Parent传递给子组件时，变量会丢失 - Angular

更新

1 个答案: