MAT-List-Item（Mat-Nav-list）内部的角材料MAT-Checkbox

发布于 2025-02-07 10:22:11 字数 664 浏览 0 评论 0原文

我想实现一份交易列表。在悬停项目时，复选框将变得可见且可选，但是如果用户不想选择特定项目，只需单击事务本身，在右窗格上，相关信息将在单击（带有路由器参数）上显示。

我的问题是，如何使用复选框分开的点击和MAT-List-Item本身的点击列表进行物质导航列表？

edit1：我能够用锚标签列出一个列表，但是不幸的是，如果我单击锚固标签的复选框，则无法检查复选框。我可以以某种方式改变这种行为吗？

<mat-nav-list>
<a mat-list-item *ngFor="let transItem of transItems" [routerLink]="transItem.id" routerLinkActive="active" [disableRipple]="true">
    <div mat-list-icon>
        <mat-checkbox [checked]="selection.isSelected(transItem)" (change)="selection.toggle(transItem)"></mat-checkbox>
    </div>
    <div matLine>
         {{ transItem.id }}
    </div>
</a>

原文

I would like to achieve to have a list of transactions. On hovering an item the checkbox would become visible and selectable, but if the user doesn't want to select the specific item just click on the transaction itself, on the right pane the relevant information would be shown on click(with router params).

My question would be how can I make a material navigation list with the clicks separated by the checkbox, and the mat-list-item itself?

EDIT1:
I was able to make a list with anchor tags, but unfortunately, if I click on the checkbox inside the anchor tag the checkbox doesn't get checked. Can I somehow change this behavior?

<mat-nav-list>
<a mat-list-item *ngFor="let transItem of transItems" [routerLink]="transItem.id" routerLinkActive="active" [disableRipple]="true">
    <div mat-list-icon>
        <mat-checkbox [checked]="selection.isSelected(transItem)" (change)="selection.toggle(transItem)"></mat-checkbox>
    </div>
    <div matLine>
         {{ transItem.id }}
    </div>
</a>

分享到QQ

分享到微博