각진 자료 2를 사용한 원격 검색

나는 자동 완성 입력이 골짜기를 검색하게하려는 4k 항목에 대한 목록을 가지고 있습니다. 앵귤러 응용 프로그램에서 생성자에서 필터를 가져 와서 필터링하면 (실제 몇 가지 대답이 제시하는 것처럼) 실용적이지 않기 때문에 서버에서 검색하고 해당 구성 요소로 데이터를 반환하려고합니다.각진 자료 2를 사용한 원격 검색

나는 코드가 같이하는 방법에 손실을 조금 해요,하지만 여기 내 시도입니다 :

HTML

<mat-form-field class="w-100"> 
    <input #searchInput [matAutocomplete]="searchOptions" formControlName="search" matInput placeholder="Search"/> 
</mat-form-field> 
<mat-autocomplete #searchOptions="matAutocomplete"> 
    <mat-option *ngFor="let item of items | async" [value]="item.id"> 
     {{ item.description }} 
    </mat-option> 
</mat-autocomplete>

타이프 라이터

export class SearchDialogComponent { 

    myForm: FormGroup; 
    items: any; 

    constructor(public formBuilder: FormBuilder, 
     public itemService: ItemService, 
     public dialogRef: MatDialogRef<SearchDialogComponent>, 
     @Inject(MAT_DIALOG_DATA) public data: any) { 
      this.createForm(); 
    } 

    ngOnInit(): void { 
     this.items = this.myForm.get('search').valueChanges.map(q => this.searchFilter(q)); 
    } 

    createForm() { 
     this.myForm = this.formBuilder.group({ 
      search: new FormControl(''), 
     }); 
    } 

    searchFilter(q: string) { 
     this.itemService.fullSearch(q).subscribe(result => { 
      return result; // This won't work, but I have no idea what will :) 
     }); 
    } 
}

출처

2017-10-13 GregoryHouseMD

정확히 무엇 후 작동하지 않는 이유는 무엇입니까? –

'return' 호출은'searchFilter' 함수의 범위에 없으며 결과는'items' 배열에 반환되지 않습니다. 나는 API를 쳤지 만 결과는 잃어 버렸다. – GregoryHouseMD

오! 다음 두 가지 :

flatMap() 연산자를 사용하고 검색 서비스 호출을 수행하십시오.
async 파이프를 사용하고 있으므로 관측 대상에 가입하지 마십시오.

나는 가정이 T이 결과 유형입니다 itemService.fullSearch() 반환 Observable<T[]>.

P.any이 원래 코드에없는 경우이 문제는 시간이 덜 걸릴 것입니다. searchFilter 메서드의 서명이 반환 형식을 선언했습니다. TypeScript는 자바 스크립트를 적어도 조금 더 안전하게 만드는 것에 관한 것입니다.

this.items = this.myForm 
    .get('search') 
    .valueChanges 
    .flatMap(searchQuery => this.itemService.fullSearch(searchQuery));

출처

2017-10-14 07:02:48

당신은 올바르게 추측한다. – GregoryHouseMD

PS에 관해서 - 나는이 일을하기 위해 무엇이든 노력하고 있었고, 그래서 선언문들은 그 과정에서 길을 잃었다. – GregoryHouseMD

각진 자료 2를 사용한 원격 검색

답변

관련 문제