html - 根据 Angular 中的条件显示可点击的列表项

Question

假设我有这份要显示的人员列表。下面您将在 *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，但这或多或少是相同的，但最终也会出现重复代码。

有没有办法在此设置中有条件地只添加 a 元素？

Answer 1

像这样的东西应该可以工作。我认为您可以在使用 $implicit 时简化 context 位以使其更短，但不确定具体如何，您可以查看 Angular 文档。

附带说明一下，我认为您不需要指定 role 属性，Material 应该为您提供这些属性。

<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>