假设我有要显示的人员列表.在下面,您将在* ngFor循环中看到此迭代的HTML.您可以查看this StackBlitz来查看完整的示例.
<mat-list role="list">
<mat-list-item *ngFor="let name of names" role="listitem">
<mat-icon mat-list-icon>person</mat-icon>
<h4 mat-line>{{name.firstName}}</h4>
</mat-list-item>
</mat-list>
在某些情况下,该列表应显示为链接列表,因为此人列表随后链接到其他网页.我能做的就是写一个* ngIf,检查它应该是链表还是普通表,如下所示.
<div *ngIf="isNormalList; else isLinkedList">
<h3>Normal list with items</h3>
<mat-list role="list">
<mat-list-item *ngFor="let name of names" role="listitem">
<mat-icon mat-list-icon>person</mat-icon>
<h4 mat-line>{{name.firstName}}</h4>
</mat-list-item>
</mat-list>
</div>
<ng-template #isLinkedList>
<h3>List with clickable items</h3>
<mat-list role="list">
<a mat-list-item href="#" *ngFor="let name of names" role="listitem">
<mat-icon mat-list-icon>person</mat-icon>
<h4 mat-line>{{name.firstName}}</h4>
</a>
</mat-list>
</ng-template>
但是,以这种方式解决它似乎有很多重复的代码.我还可以为列表项的内部部分编写一个* ngIf,但这大致相同,并且最终也会出现重复的代码.
有没有办法只在此设置中有条件地添加一个元素？
最佳答案
@H_301_24@这样的事情应该起作用.我认为您可以在使用$implicit使其更短时简化上下文位,但不确定如何精确地检查角度文档.
在旁注中,我认为您无需指定角色属性,材料应为您提供这些属性.
<div>
<mat-list role="list">
<ng-container *ngIf="isNormalList; else isLinkedList">
<mat-list-item *ngFor="let name of names" role="listitem">
<ng-container *ngTemplateOutlet="listItem; context: { $implicit: name }"></ng-container>
</mat-list-item>
</ng-container>
<ng-template #isLinkedList>
<a mat-list-item href="#" *ngFor="let name of names" role="listitem">
<ng-container *ngTemplateOutlet="listItem; context: { $implicit: name }"></ng-container>
</a>
</ng-template>
</mat-list>
</div>
<ng-template #listItem let-name>
<mat-icon mat-list-icon>person</mat-icon>
<h4 mat-line>{{name.firstName}}</h4>
</ng-template>
