Http请求不取输入值答案

【问题标题】：Http request doesnot take the input valueHttp请求不取输入值
【发布时间】：2017-08-04 12:22:23
【问题描述】：

文件结构图片

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 获取请求是这样的：order=desc&sort=activity&accepted=True&closed=True&title=undefined&site=stackoverflow。

在标题字段中，它以 undefined 作为值。

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);
}

【问题讨论】：

你在哪里设置数据？你在哪里打电话getServers？
你确定getServers 会在setData 调用之后调用
不，我不确定。如果你有，请建议任何解决方案。 @sachilaranawaka
我在子组件中调用 getServers this.faqService.getServers() .subscribe( (data) => { this.item = data.items; console.log(this.item); }, (错误) => console.log(错误));
我看到您的 FaqService 之前缺少 @Injectable() 装饰器。最好为您的问题创建一个解决方案。

标签： angular api http

【解决方案1】：

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

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

【讨论】：

因为我想要其他组件中的结果，所以我不能在 onRecievingResults() 中调用它