개체를 가져 오거나 표시 할 때 선행 기입을 사용할 수 있지만 문자열을 받아 들여 응답하는 방법은 무엇입니까?

Question

ng-bootstrap typeahead 요소를 사용하면 개체 제안의 배열을 가져온 다음 모델을 선택한 개체가되도록 하나를 선택하여 사용할 수 있습니다.

The full code can be seen in this Plunkr. 미국의 주를 검색 한 다음 model 결과를 관찰하여 테스트하십시오. 여기

템플릿입니다 : 당신이 "알라바마"를 검색 할 때

<label for="typeahead-template">Search for a state:</label> 
<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt" 
    [inputFormatter]="formatter" /> 
<hr> 
<pre>Model: {{ model | json }}</pre> 

모델 알라바마가되지 않지만, 오히려 내 상황에서

{ 
    "name": "Alabama", 
    "flag": "5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png" 
} 

, 나는 모델을 좀하고 싶습니다 Alabama. 내 양식으로 서버에 이미지와 다른 데이터를 다시 보내고 싶지 않습니다.

ng-bootstrap에서 제공 한 (selectItem) 이벤트를 사용해 보았습니다. 수동으로 값을 변경했지만 작동하지 않습니다. 모델은 동일하게 유지됩니다 - 객체가 아닌 문자열!.

즉

selectItem(e: NgbTypeaheadSelectItemEvent, fubi: any){ 
    console.log("e.item.name", e.item.name); 
    this.addressForm.patchValue({ 
     statename: e.item.name 
    }); 
    } 

내 폼의 statename 속성입니다 이런 식으로

어떤 아이디어가 왜 전화했을 때 업데이트되지? 나는 모든 명백한 것들을 시도했다. 나는 믿는다.

Answer 1

selectItem 이벤트로 바른 길을 걷고있는 것 같다. 어쩌면 구문을 제대로 이해하지 못했을 수도 있습니다. 입력 정의에서

, 당신은 아마 원하는 :

1. 하면 ngModel 참조
2. 를 제거하면 selectItem의 이벤트가 발생 될 때 실행할 함수에 대한 참조로 대체 (이 기능을 설정할 수 있습니다

   <input id="typeahead-template" 
        type="text" 
        class="form-control" 
        (selectItem)="setModel($event)" 
        [ngbTypeahead]="search" 
        [resultTemplate]="rt" 
        [inputFormatter]="formatter" /> 
   

   "모델은"적절 ... 또는 "statename는"아마도 ... 무엇 때문에 같은

) 귀하의 보트를 수레

하고, 당신의 선행 입력-template.ts 파일에서 기능 추가 :이 개조와

setModel(e: NgbTypeaheadSelectItemEvent, fubi: any) { 
    this.model = e.item.name; 
} 

I forked your Plunkr을하고는 "모델"값을 "알라바마"를 원하는대로 ... 당신이 할 수있는 설정 아마 당신이해야 할 일을하기 위해 거기에서 가져 가세요. 희망이 도움이됩니다!