Angular2 : HTML 데이터 목록 요소에서 선택한 항목을 구성 요소로 어떻게 다시 전달합니까?

나는 간단한 구성 요소가있어서 드롭 다운 상자를 만들 수 있습니다. 이 목록은 웹 API 호출의 결과로 채워집니다. 표시 목적으로 나는 항목의 두 필드만을 사용합니다. 그러나 요소가 선택되면 다른 모든 필드와 함께 작업해야합니다. 전체 요소를 구성 요소로 다시 전달하려면 어떻게합니까?Angular2 : HTML 데이터 목록 요소에서 선택한 항목을 구성 요소로 어떻게 다시 전달합니까?

정말 도움이됩니다.

import { Component, OnInit }  from '@angular/core'; 
import { Observable }  from 'rxjs/Observable'; 
import { Subject }   from 'rxjs/Subject'; 
import { LocationService } from './location.service'; 
import {Location} from './location.component'; 
import './rxjs-operators'; 

@Component({ 
    selector: 'lesson-08', 
    templateUrl: './views/lesson08.html', 
    providers: [LocationService] 
}) 
export class Lesson08 implements OnInit{ 

    constructor(private locationService: LocationService) { } 

    aLoc: Location; 

    ngOnInit() { 
     this.aLoc = new Location(); 
    } 

    errorMessage: string; 
    locations: Location[]; 
    mode = 'Observable'; 
    displayValue: string; 

    private searchTermStream = new Subject<string>(); 

    search(term: string) { 
     this.searchTermStream.next(term); 
    } 

    onSelect(item: Location) { 
     // do stuff with this location 

    } 

    items: Observable<Location[]> = this.searchTermStream 
     .debounceTime(300) 
     .distinctUntilChanged() 
     .switchMap((term: string) => this.locationService.search(term)); 
    }

출처

2016-08-31 TheCount

사용자가 데이터 목록에서 항목을 선택하지 않고 자체 입력을 입력하면 어떻게 될까요? 기본적으로 두 가지 선택 사항이 있다고 생각합니다. 데이터 목록 결과를 구성 요소의지도에 매핑하고 사용자 입력을 기반으로 원래 개체를 찾거나 사용자 입력이 완료되면 두 번째 검색을 수행합니다. –

자신의 입력을 허용하지 않습니다. 이 경우. 음, 그것이 의도입니다. 추가 검색은 내가 피하려고하는 것입니다. 웹 API는 이미 필요한 모든 데이터 속성을 가진 위치 유형을 반환합니다. "데이터리스트 결과를지도에 맵핑"하는 것이 무엇을 의미하는지 명확히 할 수 있습니까? Thanks – TheCount

쿼리 데이터가 배열로 반환되면 표시 문자열에 의해 키가 지정된 객체에 매핑됩니다. 예제'var m = {}; arrayData.forEach (d => m [keyOf (d)] = d); ' –

선택한 옵션에 메소드를 호출 (클릭) 이벤트를 다음과 같이

<h1>Get Locations</h1> 
<div> 
    <div> 
     <input list="browsers" name="browser" #term (keyup)="search(term.value)"> 
     <datalist id="browsers"> 
      <option *ngFor="let item of items | async" > 
       {{item.code + " " + item.description}} 
      </option> 
     </datalist> 
    </div> 
    <input type="submit" value="Click" (click)="onSelect(item)" /> 
</div>

구성 요소 코드입니다. 귀하가 선언 한 "항목"은 * ngFor의 범위 내에서만 알려져 있으므로 자녀들의 수준에서도 마찬가지입니다. 당신은 너무 높은 수준에서 그것을 선언했습니다.

출처

2017-12-07 18:49:28 Nadine

Angular2 : HTML 데이터 목록 요소에서 선택한 항목을 구성 요소로 어떻게 다시 전달합니까?

답변

관련 문제