#angular #angular-material #mat-icon
Вопрос:
Я хочу показать значок перед подпунктом, но когда я использую его динамически, он не отображается на моей странице. Здесь lt;mat-icon *ngIf="node.icon"gt;{{node.icon}}lt;/mat-icongt;
это не работает.
component.ts const TREE_DATA: RouteNode[] = [ { name: 'PATIENT', children: [ { path: '/patient/list', icon: 'format_list_numbered_rtl' , name: 'PATIENT LIST', class: 'router-link-active'}, { path: '/patient/history', icon: 'history', name: 'PATIENT HISTORY', class: 'router-link-active'}, ] }, { name: 'MEDICINE', children: [ { path: '/medicine/list', icon: 'format_list_numbered_rtl', name: 'MEDICINE LIST', class: 'router-link-active'}, { path: '/medicine/purchase', icon: 'inventory', name: 'PURCHASE MEDICINE', class: 'router-link-active'}, ] }, { name: 'APPOINMENT', children: [ {path: '/visitentries/list', icon: 'format_list_numbered_rtl', name: 'VISIT ENTRIES', class: 'router-link-active'}, {path: '/prescription/list', icon: 'format_list_numbered_rtl', name: 'PRESCRIPTION', class: 'router-link-active'}, ] } ]; component.html lt;mat-tree [dataSource]="dataSource" [treeControl]="treeControl"gt; lt;!-- This is the tree node template for leaf nodes --gt; lt;mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding matTreeNodePaddingIndent="20"gt; lt;!-- use a disabled button to provide padding for tree leaf --gt; lt;button mat-icon-button disabledgt;lt;/buttongt; lt;a [routerLink]="[node.ROUTES]" routerLinkActive="link-active" gt; lt;mat-icon *ngIf="node.icon"gt;{{node.icon}}lt;/mat-icongt; {{node.name}}lt;/agt; lt;/mat-tree-nodegt; lt;!-- This is the tree node template for expandable nodes --gt; lt;mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodePaddingIndent="20"gt; lt;button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' node.name"gt; lt;mat-icon class="mat-icon-rtl-mirror"gt; {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} lt;/mat-icongt; {{node.name}} lt;/buttongt; lt;/mat-tree-nodegt; lt;/mat-treegt;
Комментарии:
1. вы уверены, что значок будет внутри тега привязки ссылки?
2. весь угловой значок материала работает как есть.