Angular атрибуты компонента

Question

У меня быстрый вопрос, так как я Angular новичок ie .. Я посмотрел учебник Tour Of Heroes и точно следовал ему. Это был отличный способ начать. Я также закончил курс Complete Angular от Udemy, но мой вариант использования не обсуждается и не объясняется ни в одном.

У меня есть компонент, скажем, array-list.component. html:

<div class="list-group list-group-flush dl-list-group" *ngIf="listitems">
  <ul class="list-group">
    <li
      class="list-group-item"
      style="cursor: pointer"
      *ngFor="let list-item of list-items; let i = index"
      (click)="onEditListItem(i)"
    >
      {{ list-item.name }} ({{ list-item.date }})
    </li>
  </ul>
</div>

Отображает список (может быть очень длинным). Теперь я хочу, чтобы последние 5 элементов были в моем компоненте панели мониторинга. Могу ли я сделать это:

<app-array-list items=5></app-array-list>

или что-то в этом роде? Поскольку в учебном пособии «Тур героев» на панели инструментов отображается список из 5 героев, он просто копирует и вставляет один и тот же код:

Компонент ToH. html:

<ul class="heroes">
    <li *ngFor="let hero of heroes" (click)="onSelect(hero)"
        [class.selected]="hero === selectedHero">
        <span class="badge">{{hero.id}}</span>
        <span>{{hero.name}}</span>
        <button class="delete"
                (click)="delete(hero); $event.stopPropagation()">x
        </button>
    </li>
</ul>

ToH приборная панель:

<div class="grid grid-pad">
    <a *ngFor="let hero of heroes" [routerLink]="['/detail', hero.id]" class="col-1-4">
     <div class="module hero">
      <h4>{{hero.name}}</h4>
     </div>
    </a>
</div>

Я просто хочу вызвать свой компонент, но ограничу его, скажем, пятью элементами. Разве это невозможно?

Answer 1

Вы можете использовать SlicePipe:

<div class="list-group list-group-flush dl-list-group" *ngIf="items">
  <ul class="list-group">
    <li
      class="list-group-item"
      style="cursor: pointer"
      *ngFor="let item of items | slice: 0: 5; index as i"
      (click)="onEditListItem(i)"
    >
      {{ item.name }} ({{ item.date }})
    </li>
  </ul>
</div>

Если вы хотите, чтобы оно было динамическим c, вы можете иметь @Input() как это:

@Input() limit: number;

... и в HTML:

*ngFor="let item of items | slice: 0: limit; index as i"

Вариант использования:

<app-array-list [limit]="5"></app-array-list>

PS : Обратите внимание, что ни list-item, ни list-items не являются допустимыми именами переменных.