チェックボックスがオンクリックの折りたたみイベントを引き起こさないようにする

Question

私のアプリケーションには複数のカードがあり、各カードにはヘッダーコンポーネントがあり、一度クリックするとカードが折りたたまれ、ヘッダーのみが表示されます。私が抱えている問題は、いくつかのヘッダーにチェックボックスが含まれていて、ヘッダーのclickイベントのチェックボックスがオンになっているということです。これを防ぐための提案はありますか？

<md-card> 
    <md-card-content> 
     <md-toolbar (click)="toggleSection()"> 
     <span>{{section.Name}}</span> 
     <md-checkbox [(ngModel)]="section.isChecked">(Check to include section)</md-checkbox> 
     </md-toolbar> 
    </md-card-content> 
</md-card> 

Answer 1

あなたが実際に<md-toolbar>をクリックしてチェックボックスをクリックすると、あなたのツールバー<md-toolbar>は、チェックボックスの周りにラップしています。チェックボックスを別のdiv/spanに入れて、より高いz-indexを与えて、toggleSection()関数でevent.preventDefault();を使用してください。