如何使用默认值分配第一个元素上下文？

问题描述

我正在使用以下代码来显示数组中的一些值

<div class="row">
  <div class="column" *ngFor="let card of cards; let i=index">
    <div class="card">
      <h3>Card {{card.id}}</h3>
      <p>{{card.text}}</p>
    </div>
  </div>
</div>

但我想设置第一个是带有给定硬代码文本的按钮。它不应该来自数组。 我认为可能在索引为 0 时使用 ngClass 进行比较。但不确定如何？

解决方法

Angular 具有开箱即用的 first 和 last variables。 我不能清楚地理解你在问什么，但我认为你只想在第一个上显示一个按钮？您也可以像下面这样定位最后一个。

  <div class="row">
  <div class="column" *ngFor="let card of cards; let i=index let first = first; let last = last">
    <div class="card">
      <h3>Card {{card.id}}</h3>
      <p>{{card.text}}</p>
        <ng-container *ngIf="first"><button>first item only</button></ng-container>
        <ng-container *ngIf="last"><button>last item only</button></ng-container>
    </div>
  </div>
</div>

,

你可以尝试这样的事情：

<div class="row">
  <div class="column" *ngFor="let card of cards; let i=index">
    <div 
      class="card" 
     (click)="((i === 0) || (i === cards.length)) && yourClickEvent($event)"
    >
      <h3>Card {{ (i === 0) ? 'Your Hard code ID' : card.id }}</h3>
      <p>{{card.text}}</p>
    </div>
  </div>
</div>

上面点击事件中的条件将检查它是第一张卡片还是最后一张卡片，然后实现您的点击功能..ID也是如此

这是您想要达到的目标吗？