각 배열 요소를 옵션 태그에 바인딩

클래스의 배열 요소를 옵션 태그에 바인딩하려고합니다. 그들이 목록은 다음 않는 angular.io "영웅의 투어"튜토리얼 (https://angular.io/docs/ts/latest/tutorial/toh-pt2.html)에서 각 배열 요소를 옵션 태그에 바인딩

<li *ngFor="let hero of heroes" 
    (click)="onSelect(hero)"> 
    <span class="badge">{{hero.id}}</span> {{hero.name}} 
    </li>

내가 바로 * ngFor = "영웅의하자 영웅"을 이해한다면 각 영웅 (영웅 배열의 각 요소)을 li 요소와 연결 한 다음 예를 들어 {{hero.id}}와 (과) 연관된 영웅의 특성을 표시합니다.

내가 인쇄와 함께 단순한 루프 인 경우 onSelect (영웅)를 사용하여 영웅 개체를 다시 얻는 방법을 알 수 없기 때문에 내가 연관 관계라고 말합니다.

나는 옵션을 사용하여 동일한 작업을 수행하기 위해 노력 해왔다 : 다음 이벤트가 옵션으로 트리거되지 클릭하기 때문에

<option *ngFor="let perso of persos"> 
    <span>{{perso.id}} : </span> {{perso.nom}} 
    </option>

그러나

(click)="onSelect(hero)"

는 효과가 없습니다. 나는 적절한 방아쇠를 찾지 못했습니다. 모든 도움과 추가 정보는 매우 환영합니다.

출처

2016-07-19 shrimpdrake

당신은 option의 [value] 속성에 객체를 바인딩 할 수 없습니다 :

<select [(ngModel)]="selectedPerso" (change)="onChange($event)"> 
    <option *ngFor="let perso of persos" [value]="perso.id"> 
     <span>{{perso.id}} : </span> {{perso.nom}} 
    </option> 
</select>

그리고 구성 요소 클래스 몸에

당신은 페이지로드에 미리 선택됩니다 기본 값으로 변수를 바인딩하는 것을 정의 요소.

option 요소의 [value] 속성에 개체 ID를 바인딩하고 select의 (change) 이벤트를 사용합니다.

아래의 예를 참조하십시오 : http://plnkr.co/edit/OOYx3LiN1pO3qffKn7lq

출처

2016-07-19 13:40:49

내가 당신을 찾고 있었던 것은 고맙습니다. – shrimpdrake

이러한 원시 HTML 요소 인 경우 Angular 2는 양방향 바인딩을 제공하므로 ngModel과 직접 값을 바인딩 할 수 있습니다. 이는 모든 입력 태그에 적용됩니다. 따라서 수동으로 선택을 변경하면 해당 변수가 현재 값으로 업데이트됩니다. 또한 selectedPerso을 프로그래밍 방식으로 변경하면보기가 새 선택 항목으로 업데이트됩니다.

selectedPerso: number = persos[0].id; 

onChange(event) { 
    console.log("Selection changed: ", event); 
}

출처

2016-07-19 13:12:59 rinukkusu

이 아닌가 [(ngModel)] = "selectedPerso"및 (변경) = "onChange가 ($ 이벤트)"

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ' Select your favorite serie: <select (change)="onChange($event.target.value)"> <option *ngFor="let serie of series" [value]="serie.id">{{ serie.name }}</option> </select> <br /> <br /> Selected Serie: <br /> <span *ngIf="selectedSerie"> {{ selectedSerie.id }} - {{ selectedSerie.name }} </span> ' }) export class AppComponent { private series: any[]; private selectedSerie: any; constructor() { this.series = [ { id: 1, name: 'Friends' }, { id: 2, name: 'How I met Your Mother' }, { id: 3, name: 'Modenr Family' } ]; this.selectedSerie = this.series[0]; } onChange(serieId: any): void { this.selectedSerie = this.series.find(serie => serie.id == serieId); } }

을 전체 여기 예를 참조하십시오 여분? – shrimpdrake

변경 사항에 대한 코드를 실행하고 싶다고 가정했습니다. – rinukkusu

각 배열 요소를 옵션 태그에 바인딩

답변

관련 문제