Отображать интерактивные элементы списка в зависимости от условий в Angular

Question

Допустим, у меня есть список людей, которых я хочу отобразить. Ниже вы увидите HTML для этой итерации в цикле *ngFor. Вы можете просмотреть этот 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

Я думаю, что здесь есть баланс между сохранением строк и сохранением читабельности, я думаю, что это может оказаться слишком сложным, если попытаться не допустить повторения кода.

Простой и читабельный.

<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 с помощью CSS, если оно существует. Который не приятен или особенно читабелен.

Answer 2

что-то вроде этого должно работать.Я думаю, что вы можете ослабить бит 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 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 для примера .