Angular2如何在使用ng-for时设置元素类名，仅在第一个元素

Question

我已经构建了ul，并且只想在第一个li元素上设置类。

我想仅在第一个li上设置class="active"。我确实得到了class属性的索引，但这并不是我想要的。

＆＃13;

＆＃13;

import { Component, View, NgFor,Inject,forwardRef,Input, NgIf,  FORM_DIRECTIVES } from 'angular2/angular2';
@Component({
    selector: 'tabs'
})
@View({
    template: `
        <ul>
           <li *ng-for="#tab of tabs;#index = index" class="{{index}}" (click)="selectTab(tab)">{{tab.tabTitle}}</li>
        </ul>
        <ng-content></ng-content>
  `,
    directives: [NgFor]
})

export class Tabs {
    get tabs() {
        return this._tabs;
    }

    set tabs(value) {
        this._tabs = value;
    }
    private _tabs;

    constructor() {
        console.log("ctor.Tabs");
        this._tabs = [];
    }

    selectTab(tab) {
        this._tabs.forEach((tab) => {
            tab.active = false;
        });
        tab.active = true;
    }

    addTab(tab: Tab) {
        if (this._tabs.length === 0) {
            tab.active = true;

        }
        else {
            tab.active = false;
        }
        this._tabs.push(tab);
    }
}

@Component({
    selector: 'tab',
    properties: ['tabTitle: tab-title']
})
@View({
    template: `
    <div [hidden]="!active" [class]="active">
      <ng-content/>
    </div>
  `
})
export class Tab {
    @Input() index: number;

    constructor(@Inject(forwardRef(() => Tabs)) tabs: Tabs) {
        console.log("ctor.Tab") ;
        tabs.addTab(this);
        console.log(tabs);
    }

    get active() {
        return this._active;
    }
    set active(value) {
        this._active = value;
    }
    private _active;


}

＆＃13;

＆＃13;

＆＃13;

Answer 1

根据@jeff的要求

您只需使用此行即可实现

<li *ngFor="let tab of tabs; let index = index" [class.active]="index == 0" ...>

很高兴它有所帮助：）

<强>更新

使用beta 15添加了first局部变量，因此原始解决方案可以重写为

<li *ngFor="let tab of tabs; let isFirst = first" [class.active]="isFirst" ...>

请参阅Angular 2 - ngFor - local variable “first” does not work

Answer 2

散列语法给了我Template parse errors（@angular 2.2.0），我不得不使用let。

<ul>
  <li *ngFor="let item of items; let i = index; let firstItem = first; let lastItem = last" [ngClass]="{ active: firstItem }">
    {{ i }} {{ firstItem }} {{ lastItem }} {{ item }} 
  </li>
</ul>

Answer 3

截至本文发布之日，文档显示：

first as isFirst

如此：

<div *ngFor="let item of items; first as isFirst">
    ... etc