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

Question

我使用下面的代码来显示数组

中的一些值

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

但是我想设置第一个是给定硬代码文本的按钮。它不应该来自数组。我想可能是用ngClass来比较当索引为0的时候。但不知道怎么做?

Answer 1

Angular有first和last变量。我不太明白你在问什么，但我认为你想要显示一个按钮只在第一个?你也可以像下面这样瞄准最后一个。

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

Answer 2

您可以尝试这样做:

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

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

也是如此这是你想要达到的目标吗?