Http请求不接受输入值

Question

文件结构图片

export class FaqService {
public inputValue;
constructor(private http: Http) {}

ngOnInit() {}

setData(val) {
 this.inputValue = val;
    console.log(this.inputValue);
}

getData() {
    return this.inputValue;
}

getServers() {
    return this.http.get(Staticdata.apiBaseUrl + "/2.2/search/advanced?key="+ Staticdata.key +"&access_token="+ Staticdata.access_token +"&/2.2/search/advanced?order=desc&sort=activity&accepted=True&closed=True&title=" + this.inputValue + Staticdata.redirectUrl + "&filter="+ Staticdata.filters)
        .map(
        (response: Response) => {
            const items = response.json();
            return items;
        },
    )
    .catch(
        (error: Response) => {
            return Observable.throw(error);
        }
  );
}
}

在上面的类中，我从父组件的方法setData()获取数据，我无法将获取的值传递给http get request。

Http get请求以这种方式进行：order=desc&sort=activity&accepted=True&closed=True&title=undefined&site=stackoverflow。

在标题字段中，未定义为值。

import { Component, OnInit  } from '@angular/core';
import { FaqService } from '../faq.service';

@Component({
selector: 'app-search-results',
 templateUrl: './search-results.component.html',
 styleUrls: ['./search-results.component.css'],
 providers: [FaqService]
})

 export class SearchResultsComponent implements OnInit {
 data: any[];
 item: any[];

 constructor(private faqService: FaqService) {
 }
 ngOnInit() {

  this.faqService.getServers()
        .subscribe(
        (data) => {
            this.item = data.items;
            console.log(this.item);
        },
        (error) => console.log(error)
    );
}  
}

这里我在子组件中调用getServers()方法。 提前谢谢。

faq.component.html

<input [(ngModel)]="inputValue" placeholder="Search FAQ" type="text"/>
<button type="submit" id="headerSearchbutton"  (click)="onRecievingResults(inputValue)"></button>

这里我使用ngModel获取输入并将值传递给onRecievingResults函数。

 onRecievingResults(value) {
    this.faqService.setData(value);
}

Answer 1

@Samson，如果我正确理解事件序列，则在FaqService中未定义inputValue，因为在调用 setData（）之前调用getServers（）。该组件从其ngOnInit（）方法调用getServers（），但在单击headerSearch按钮之前，它不会调用setData（）。

似乎getServers（）的目的是根据用户在字段中输入的内容执行搜索，不是吗？如果是这样，而不是从组件的ngOnInit（）调用getServers（），为什么不在单击按钮时调用它，在onRecievingResults中？