Html 按角度显示基于条件的可单击列表项

假设我有一个要显示的人员列表。下面，您将在

*ngFor

循环中看到此迭代的HTML。您可以查看以查看完整示例

人
{{name.firstName}

在某些情况下，该列表应显示为链接列表，因为人员列表会链接到其他网页。我能做的就是编写一个

*ngIf

，检查它是链表还是普通列表，如下所示

带项目的正常列表
人
{{name.firstName}
列出可点击的项目

然而，用这种方法解决它似乎有很多重复的代码。我也可以为列表项的内部部分编写一个

*ngIf

，但这或多或少是相同的，并且最终也会产生重复的代码

---

有没有办法只在该设置中有条件地添加

a

元素？

您可以将

*ngFor

放在

ng模板

标记上：

<ng-template ngFor [ngForOf]="items" let-item>
    <div *ngIf="!item.link" class="card">
        <h4>Card Info:</h4>
        <p>ID: {{ item.id }}</p>
        <p>
        Title: {{ item.title }}
        </p>
    </div>
    <a *ngIf="item.link" href="{{ item.link }}" class="card">
        <h4>Card Info:</h4>
        <p>ID: {{ item.id }}</p>
        <p>
        Title: {{ item.title }}
        </p>
    </a>
</ng-template>

卡片信息：
ID:{{item.ID}


标题：{{item.Title}

---

.

我认为在保存行和保持可读性之间可以找到平衡，我认为尝试确保绝对没有代码重复可能会变得复杂

简单易读

<div>
  <h3>List with clickable items</h3>
  <mat-list role="list">
    <div *ngFor="let name of names">
      <a *ngIf="name.link" mat-list-item href="#" role="listitem">
        <mat-icon mat-list-icon>person</mat-icon>
        <h4 mat-line>{{name.firstName}}</h4>
      </a>
      <div *ngIf="!name.link">
        <mat-icon mat-list-icon>person</mat-icon>
        <h4 mat-line>{{name.firstName}}</h4>
      </div>
    </div>
  </mat-list>
</div>

列出可点击的项目
人
{{name.firstName}

这将重复以下操作，并添加两个新的

标记

<mat-icon mat-list-icon>person</mat-icon>
<h4 mat-line>{{name.firstName}}</h4>

人
{{name.firstName}

---

这将是我能想到的最不重复的方式，而不需要做一些奇怪的事情，比如将

伸展到

mat图标

和

h4

（如果存在的话）上。这不是令人愉快的，也不是特别可读的。

像这样的东西应该有用。我认为当使用

$implicit

使其更短时，可以简化

上下文

位，但不确定如何准确地检查角度文档

<div>
  <h3>List with clickable items</h3>
  <mat-list role="list">
    <div *ngFor="let name of names">
      <a *ngIf="name.link" mat-list-item href="#" role="listitem">
        <mat-icon mat-list-icon>person</mat-icon>
        <h4 mat-line>{{name.firstName}}</h4>
      </a>
      <div *ngIf="!name.link">
        <mat-icon mat-list-icon>person</mat-icon>
        <h4 mat-line>{{name.firstName}}</h4>
      </div>
    </div>
  </mat-list>
</div>

另一方面，我认为您不需要指定

角色

属性，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>

人
{{name.firstName}

您可以始终显示相同的列表，但当您不希望项目可单击时，只需从

a

元素中删除单击事件，并对其进行样式设置。@PaulCosma谢谢，我考虑过了，但我根本不希望呈现

a

元素。正如您所读到的和我在问题中所说的，您仍然在编写大量重复代码。如果您根本不想呈现

a

标记，那么您必须有一些重复代码。这种方式至少只使用一个

*ngFor

，而不是两个。但是如果你不想在没有链接的情况下渲染

标签，你必须这样做。虽然它看起来像更多的代码，但我认为这是最好的角度渲染方法。谢谢你的解释。谢谢你的回答。我同意它应该是可读的，但感觉这里缺少了一些与角度相关的东西。