Javascript 使用动态函数/可观察引用时未定义httpClient.get

所以几天前我问了一个问题，并在解决方案上取得了一些进展，但现在我被另一堵墙卡住了，我不知道如何克服

我有两个父组件，一个共享视图/组件和一个扩展的基本组件，以及一个连接在一起的服务。目标是使用两个父组件驱动共享组件中显示的数据。这两个父组件使用对传递到共享组件中的服务方法的引用来获取数据

我遇到了一个问题，无论我做什么尝试，我的http.get始终是未定义的。我像在其他服务中一样实例化了它，但我运气不好。我怀疑这是由于我如何传递我的服务引用引起的。代码如下：

父组件代码：

// PARENT COMPONENT
myData$: Observable<myType>;
searchMethod: Function;

constructor(private myService){
    this.myData$ = this.myService.myData$;
    this.searchMethod = this.myService.searchData;
}

// PARENT COMPONENT HTML
<app-shared-component 
[myData$] = "myData$" 
[searchMethod]="searchMethod">
</app-shared-component>

export class MySharedComponent extends BaseComponent<MyType> implements OnInit {

@Input() myData$: Observable<myType>;
@Input() searchMethod: Function;

constructor() { super(); }

ngOnInit(): void {
    this.data$ = this.myData$;
}

search(): void {
    this.searchMethod().subscribe(//do something);
}

@Input data$: Observable<T>;

ngOnInit(): void {
    this.data$.subscribe((response: T) => //do something);

    super.ngOnInit();
}

private myDataSubject = new BehaviorSubject<MyType>(new MyType());

get myData$(): Observable<MyType> {
    return this.myDataSubject.asObservable();
}

constructor(private http: HttpClient) { }

searchData(): Observable<void> {
    return new Observable<void>(observer => {
        this.http.get<MyType>(
            'http://myuri'
        ).subscribe(
            response => {
                // do something
            },
            () => observer.error(),
            () => observer.complete()
        );
    });
}

//父组件
myData$：可观察；
搜索方法：函数；
构造函数（私有myService）{
this.myData$=this.myService.myData$；
this.searchMethod=this.myService.searchData；
}
//父组件HTML

共享组件代码：

// PARENT COMPONENT
myData$: Observable<myType>;
searchMethod: Function;

constructor(private myService){
    this.myData$ = this.myService.myData$;
    this.searchMethod = this.myService.searchData;
}

// PARENT COMPONENT HTML
<app-shared-component 
[myData$] = "myData$" 
[searchMethod]="searchMethod">
</app-shared-component>

export class MySharedComponent extends BaseComponent<MyType> implements OnInit {

@Input() myData$: Observable<myType>;
@Input() searchMethod: Function;

constructor() { super(); }

ngOnInit(): void {
    this.data$ = this.myData$;
}

search(): void {
    this.searchMethod().subscribe(//do something);
}

@Input data$: Observable<T>;

ngOnInit(): void {
    this.data$.subscribe((response: T) => //do something);

    super.ngOnInit();
}

private myDataSubject = new BehaviorSubject<MyType>(new MyType());

get myData$(): Observable<MyType> {
    return this.myDataSubject.asObservable();
}

constructor(private http: HttpClient) { }

searchData(): Observable<void> {
    return new Observable<void>(observer => {
        this.http.get<MyType>(
            'http://myuri'
        ).subscribe(
            response => {
                // do something
            },
            () => observer.error(),
            () => observer.complete()
        );
    });
}

导出类MySharedComponent扩展BaseComponent实现OnInit{
@Input（）myData$：可观察；
@输入（）搜索方法：函数；
构造函数（）{super（）；}
ngOnInit（）：void{
this.data$=this.myData$；
}
search（）：void{
this.searchMethod（）.subscribe（//做某事）；
}

基本组件代码：

// PARENT COMPONENT
myData$: Observable<myType>;
searchMethod: Function;

constructor(private myService){
    this.myData$ = this.myService.myData$;
    this.searchMethod = this.myService.searchData;
}

// PARENT COMPONENT HTML
<app-shared-component 
[myData$] = "myData$" 
[searchMethod]="searchMethod">
</app-shared-component>

export class MySharedComponent extends BaseComponent<MyType> implements OnInit {

@Input() myData$: Observable<myType>;
@Input() searchMethod: Function;

constructor() { super(); }

ngOnInit(): void {
    this.data$ = this.myData$;
}

search(): void {
    this.searchMethod().subscribe(//do something);
}

@Input data$: Observable<T>;

ngOnInit(): void {
    this.data$.subscribe((response: T) => //do something);

    super.ngOnInit();
}

private myDataSubject = new BehaviorSubject<MyType>(new MyType());

get myData$(): Observable<MyType> {
    return this.myDataSubject.asObservable();
}

constructor(private http: HttpClient) { }

searchData(): Observable<void> {
    return new Observable<void>(observer => {
        this.http.get<MyType>(
            'http://myuri'
        ).subscribe(
            response => {
                // do something
            },
            () => observer.error(),
            () => observer.complete()
        );
    });
}

@输入数据$：可观察；
ngOnInit（）：void{
this.data$.subscribe（（响应：T）=>//做点什么）；
super.ngOnInit（）；
}

服务代码：

// PARENT COMPONENT
myData$: Observable<myType>;
searchMethod: Function;

constructor(private myService){
    this.myData$ = this.myService.myData$;
    this.searchMethod = this.myService.searchData;
}

// PARENT COMPONENT HTML
<app-shared-component 
[myData$] = "myData$" 
[searchMethod]="searchMethod">
</app-shared-component>

export class MySharedComponent extends BaseComponent<MyType> implements OnInit {

@Input() myData$: Observable<myType>;
@Input() searchMethod: Function;

constructor() { super(); }

ngOnInit(): void {
    this.data$ = this.myData$;
}

search(): void {
    this.searchMethod().subscribe(//do something);
}

@Input data$: Observable<T>;

ngOnInit(): void {
    this.data$.subscribe((response: T) => //do something);

    super.ngOnInit();
}

private myDataSubject = new BehaviorSubject<MyType>(new MyType());

get myData$(): Observable<MyType> {
    return this.myDataSubject.asObservable();
}

constructor(private http: HttpClient) { }

searchData(): Observable<void> {
    return new Observable<void>(observer => {
        this.http.get<MyType>(
            'http://myuri'
        ).subscribe(
            response => {
                // do something
            },
            () => observer.error(),
            () => observer.complete()
        );
    });
}

private myDataSubject=new BehaviorSubject（new MyType（））；
获取myData$（）：可观察{
返回此.myDataSubject.asObservable（）；
}
构造函数（私有http:HttpClient）{}
searchData（）：可观察{
返回新的可观察对象（观察者=>{
这是http.get(
'http://myuri'
).订阅(
响应=>{
//做点什么
},
（）=>observer.error（），
（）=>observer.complete（）
);
});
}

当您在父组件中设置

this.searchMethod=this.myService.searchData

时，您似乎正在失去服务的上下文。如果您将

searchData（）{

更改为箭头函数，它应该会起作用：

searchData=（）：Observable=>{

如果放置控制台，会发生什么。log（）您的响应中有哪些数据？是否返回了任何数据？@JD333它实际上从未命中响应。它只是在记录this.http时抛出“无法读取未定义的属性'get'，并在订阅中滚动…不确定..您使用的是哪个角度？请尝试此..方法（）{this.http.get（yoururl）.订阅（（响应）=>{console.log（response）；}）；}可以在任何地方调用“method（）”。如果可行，您可以创建一个主题，将get设置为返回响应。然后从任何地方订阅它。我使用的是Angular7。这会引发相同的错误，因为this.http未定义。我将尝试添加（）=>正在传递的函数的装饰器。我认为这可能是HttpClient如何获取其上下文的问题。这正是我的问题，感谢您解决了这个问题！欢迎来到社区！