搜索一次后无法再次搜索 [英] After searching once not able to search again

问题描述

文件结构:

我有一个输入文本框，在其中输入内容并将该值传递给名为onRecievingResults()的函数，然后使用params将该值传递给另一个组件并发出http请求，如果我再次搜索，我将得到结果无法获得结果.

I have a input textbox , there i type something and pass that value to a function named onRecievingResults() and pass that value to another component using params and make http request and i get the results if i search again i am not able to get the results.

faq.component.ts

onRecievingResults() {
    this.router.navigate(['results', this.inputValue], {relativeTo: this.route});
}

search-results.component.ts

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

inputValue;
constructor(private faqService: FaqService,private route: ActivatedRoute,) {
}
ngOnInit() {
this.route.params.subscribe(
(params : Params) => {
 this.inputValue = params["inputValue"];
    }
);
  this.faqService.getServers(this.inputValue)
        .subscribe(
        (data) => {
            this.item = data.items;
        },
        (error) => console.log(error)
    );
  }  
}

faq.service.ts

getServers(inputValue) {
    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=" + inputValue + Staticdata.redirectUrl + "&filter="+ Staticdata.filters)
        .map(
        (response: Response) => {
            const items = response.json();
            return items;
        },
    )
    .catch(
        (error: Response) => {
            return Observable.throw(error);
        }
  );
}

推荐答案

appcomponent.html

appcomponent.html

<app-child [items]="items"></app-child>
<form [formGroup]="searchForm"><input formControlName="search"></form>

appcomponent.ts

appcomponent.ts

export class AppComponent implements OnInit  {
 searchForm: FormGroup;
 search= new FormControl();
 searchField: FormControl;
items;

constructor(private fb: FormBuilder, private service: AppService){}

     ngOnInit(){
        this.searchField = new FormControl();
        this.searchForm = this.fb.group({search: this.searchField})

               this.searchField.valueChanges
               .debounceTime(400)
               .switchMap(res =>  this.service.search(res))
              .subscribe(res => {this.items = res});}

app-child.component.html

app-child.component.html

<h3>child component Search bar values of parent component</h3>
<div *ngFor="let item of items">
      {{item}}
    </div>

app-child.component.ts

app-child.component.ts

@Component({
    selector: 'app-child',
    templateUrl: './appchild.component.html'
})
export class appChildComponent {
@Input()
    items;
}

如您所要求的有关服务参考的搜索栏上的所有内容，请检查此朋克车

As you requested this all about search bar about service reference check this plunker

这篇关于搜索一次后无法再次搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！