각도 재질 드롭 다운 옵션을 선택한 후 추가 시간이 자동으로 표시됩니다.

Question

재료 자동 완성에서 옵션을 선택할 때마다 서버에 추가 HTTP GET 호출이 이루어집니다. 드롭 다운 옵션을 선택하면 입력을 채우기 만하면됩니다.

드롭 다운 옵션은 서버에서 동적으로 검색됩니다.

HTML :

<form class="example-form"> 
    <mat-form-field class="example-full-width"> 
     <input type="text" placeholder="search item" aria-label="Item1" matInput [formControl]="searchTerm" [matAutocomplete]="auto1"> 
     <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayFn"> 
     <mat-option *ngFor="let item of searchResult" [value]="item.Id"> 
      {{ item.Name }} 
     </mat-option> 
     </mat-autocomplete> 
    </mat-form-field> 
    </form> 

타이프 라이터는 : 다른

searchTerm : FormControl = new FormControl(); 

    searchResult = []; 
    constructor(private service: AppService){ 
     this.searchTerm.valueChanges 
      .debounceTime(400) 
      .subscribe(data => { 
       this.service.search_word(data).subscribe(response =>{ 
        this.searchResult = response 
       }) 

모든 것이 잘 작동합니다. 유일한 문제는 자동 완성 옵션이 선택되었을 때 서버에 대한 예기치 않은 추가 호출입니다.

빠른 업데이트 : 답변이 아직 완전히 해결되지 않았습니다. 그러나, 나는 이것을 displayWith에 문제가 될 수있는 범위로 좁혔다.

Answer 1

드롭 다운 선택이 searchTerm 양식 컨트롤의 값을 변경하기 때문에 문제가 발생합니다. 해당 폼 컨트롤에서 관찰 가능한 valueChanges에 대한 이벤트가 발생합니다.

원하지 않는 Http GET 요청을 무시하기 위해 양식 컨트롤에서 관찰 가능한 일부 논리를 사용자의 valueChanges에 빌드하는 몇 가지 방법이 있습니다.

나이브 용액 순 용액 selectionValue === searchTerm.value 경우 관찰 로직의 메뉴 옵션을 선택 값을 저장하고 이동하는

.

var optionSelection; // set this value on selection of a dropdown option 
this.searchTerm.valueChanges 
    .debounceTime(400) 
    .subscribe(data => { 
    if (optionSelection !== searchTerm.value) { 
     this.service.search_word(data).subscribe(response =>{ 
     this.searchResult = response 
     }) 
    } 
    }) 

더 나은 솔루션

FormControl 클래스는 관찰 valueChanges에 이벤트를 방출 할 것인지 여부를 지정하는 선택적 매개 변수가있는 setValue 기능을 가지고 있습니다. setValue로 SEARCHTERM 양식 제어 값을 설정하려면 드롭 다운 옵션 선택을 변경하여

setValue(value: any, options: { 
    onlySelf?: boolean; 
    emitEvent?: boolean; 
    emitModelToViewChange?: boolean; 
    emitViewToModelChange?: boolean; 
} = {}): void 

, 당신은 선택 emitEvent: false 매개 변수를 전달하고 발광에서이 추가로 관찰 할 수있는 이벤트를 중지 할 수 있습니다. emitEvent가 false의 경우

searchTerm.setValue(dropdownValue, { emitEvent: false }); 

는 FormControl에 valueChanges 이벤트가 발생합니다 이러한 변화는 방출되지 않을 수 있습니다. 기본값은 true입니다 (updateValueAndValidity로 떨어짐).

Answer 2

문제는 두 가지가 발생하는 이벤트의 양에 달려 있습니다 ... 이미 벌레를 만들었지 만 작동하는 방법입니다. 희망이 도움이 될 것입니다.

HTML을 : 구성 요소에서

<mat-option *ngFor="let item of searchResult" [value]="item.Id" (onSelectionChange)="onSelectionChange($event, item.Id)"> // or item 

:

이

내 솔루션입니다

private onSelectionChange(_event: any, _id: any) { 
    if (_event.isUserInput === true) { // there are two events one with true and one with false; 
    this.service.search_word(_id).subscribe(response =>{ 
     this.searchResult = response 
    }) 
} 

Answer 3

당신이 당신의 입력 텍스트에 (keyup)="onKeyUp($event)"를 사용할 수 있으며이

처럼 사용할 수 있습니다

onKeyUp(event: any) { 
    this.service.search_word(event.target.value).subscribe(response =>{ 
        this.searchResult = response 
       }) 
}