이벤트 묶기는 값이 전달 된 값과 함께 작동합니다.

Question

이벤트 바인딩을 처음 사용하여 ()에 값과 값이 전달 된 이유와 방법을 이해할 수 없습니다. 나는 각도 tutorial 다음하고있는 부분

selectedHero: Hero; 

onSelect(hero: Hero): void { 
    this.selectedHero = hero; 
} 

내가 (영웅)에서 온 않은 곳 이해하고로드하는 방법을 알 수

<li *ngFor="let hero of heroes" (click)="onSelect(hero)"> 

내가 할 수있는이 코드를 기반으로하는 데이터

Answer 1

이 구성 요소가 heroes이라는 배열이있는 클래스에 구현되어 있다고 가정합니다. 구성 요소의 템플릿에는 목록이 있습니다. <ul>. *ngFor 지시문은 배열 heroes을 반복하고 각 배열 요소에 대해 하나의 <li> 요소를 만듭니다. 변수 hero은 배열을 반복하는 데 사용되며 아무 것도 지정할 수 있습니다.

루프가 완료된 후 각 <li>의 값은 배열의 Hero의 인스턴스이며 각 <li>에는 클릭 수신기가 있습니다. 목록 요소 (<li>)를 클릭하면 onClick 메서드가 루프 중에이 목록 요소에 할당 된 영웅 인스턴스를 전달하여 호출됩니다.

Answer 2

hero 개체는 *ngFor="let hero of heroes"에서 왔습니다.

ngFor 지시어 :은 iterable의 각 항목을 해당 템플릿의 컨텍스트로 사용하여 템플릿을 반복하는 방법입니다.

모든 영웅 루프는 특정 hero 개체를 사용하며 을 사용하여 onClick 이벤트를 바인딩하는 li 요소를 생성합니다.

위에서 볼 수 있듯이 onSelect(hero: Hero): void으로 onSelect 메서드가 구성 요소에 선언되었습니다.이 선언을 사용하면 구성 요소의 선택기 내의 모든 위치에서이 선언을 사용할 수 있습니다.

반면에 heroes 개체는 hero 유형의 배열이며 구성 요소 내에 이전에로드됩니다.

아마도이 배열은로드 할 특정 서비스를 호출하여로드되고 heroes이며 모든 요소가 렌더링 될 필요한 데이터를로드하기 위해 수행해야하는 첫 번째 작업 중 하나입니다. heroes에 대한 구성 요소 HeroesComponent 데이터에서

는 다음과 같이 선언했다 :이 튜토리얼에서는

heroes = HEROES; 

의 heroes 데이터가이 파일 mock-heroes.ts에 의해 제공되며 그 내용은 다음과 같다 :

import { Hero } from './hero'; 

export const HEROES: Hero[] = [ 
    { id: 11, name: 'Mr. Nice' }, 
    { id: 12, name: 'Narco' }, 
    { id: 13, name: 'Bombasto' }, 
    { id: 14, name: 'Celeritas' }, 
    { id: 15, name: 'Magneta' }, 
    { id: 16, name: 'RubberMan' }, 
    { id: 17, name: 'Dynama' }, 
    { id: 18, name: 'Dr IQ' }, 
    { id: 19, name: 'Magma' }, 
    { id: 20, name: 'Tornado' } 
];