按角度显示可按条件的列表项

Question

假设我有一张我想展示的人的名单。下面您将在*ngFor循环中看到此迭代的HTML。您可以查看这个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

像这样的东西应该管用。我认为当使用context使其更短时，可以简化$implicit位，但不确定如何准确地检查角度文档。

另外，我认为您不需要指定role属性，材料应该为您提供这些属性。

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

Answer 2

我认为在节省代码行和保持可读性之间可以找到平衡，我认为它可以克服复杂的尝试，确保绝对不重复代码。

简单可读的。

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

这将使以下操作重复进行，并添加两个新的<div>标记。

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

这将是我所能想到的最不重复的方式，而不是做一些奇怪的或讨厌的事情，比如如果存在的话，将<a>扩展到mat-icon和h4上。这是不愉快的或特别可读的。

Answer 3

您可以将*ngFor放在ng-template标记上：

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

查看这个Stackblitz示例。