2017-10-28 25 views
2

クリックしたアンカー要素のIDを取得しようとしています。アンカータグがクリックされた要素IDが表示されない

<div class="list-group col-md-4" *ngFor="let book of bookbook"> 
     <a href="#" class="list-group-item" id={{book.id}} (click)="selectBook($event)"> 
     <img src="{{book.image}}" alt="#"> 
     <p><strong>Price: ${{book.price}} | {{book.id}}</strong></p> 
     <p>{{book.summary}}</p> 
     </a> 
    </div> 

ここでクリック機能です:ここに私のHTMLです

selectBook(event){ 
     console.log(event.target.id) 
    } 

任意のアイデアは、私がここで間違ってやっていますか?

答えて

3

あなたが本

(click)="selectBook(book)" 
+0

も参照してみてください。ありがとう!私はまだイベントオブジェクトを介してIDを取得することが機能していないことを知りたいですが。 – ZeroDarkThirty

+0

'selectBook()'の中にブレークポイントを追加すると、イベントオブジェクトを調べることができます。 Angular docのその他の記事:https://angular.io/guide/user-input#get-user-input-from-the-event-object – stealththeninja

+0

$イベントを渡すと、リストではなくMouseEventオブジェクト(タイプ 'click')が渡されます。オブジェクト –

3

を渡すことができtargetcurrentTarget

event.targetプロパティは、イベントが起こった要素への参照が含まれてい混同しないでください。

キャプチャおよびバブリングのフェーズでは、このターゲットは変更されず、クリックされた要素への参照として残っていることを理解することが非常に重要です。あなたのケースではimgpまたはaになることがあります。

現在どのHTML要素がイベントを処理しているのかを知るには、現在のターゲットを使用する必要があります。

は今

selectBook(event){ 
    console.log(event.currentTarget.id) 
} 

は今、なぜ私は母の前にそのことを考えていなかった

関連する問題