Angular 2为ngFor中的每个项目的函数调用返回值

Question

我正在使用带有TypeScript的Angular 2，我正在尝试实现一个动态类。

这是我的组件HTML：

<main class="pure-g">
  <div *ngFor="let ex of exs; let i = index; trackBy: index" [className]='columns(i)'>
    {{ex.name}} | {{ex.parts}}
  </div>
</main>

这是我的TS：

exs: Object[] = [
    {name: 'ex1', parts: ['upper', 'lower']},
    {name: 'ex2', parts: ['upper', 'lower']},
    {name: 'ex3', parts: ['upper', 'lower']},
    {name: 'ex4', parts: ['upper', 'lower']},
    {name: 'ex5', parts: ['upper', 'lower']},
    {name: 'ex6', parts: ['upper', 'lower']},
    {name: 'ex7', parts: ['upper', 'lower']}
];

private _reminder: number = this.exs.length % 6;
private _className: string = "pure-u-";

columns(index) {
    let _class: string;
    if (index <= 5) {
        _class = this._reminder === 0 ? this._className + "1-6" : this._className + "1-" + this._reminder;
    } else {
        _class = this._className + "1-" + this._reminder;
    }

    return _class;
}

我的目标是为每个项目执行columns函数，将其索引传递给函数，以便每个项目评估不同的类。我得到的结果实际上是：

pure-u-1-1 

对于每个项目，似乎执行函数返回className绑定所有项目，而不是每个项目。

我认为的实际结果是这样的：

itemOne iteration -> call columns(index=0) -> return 'pure-u-1-6';
itemTwo iteration -> call columns(index=1) -> return 'pure-u-1-6';
itemThree iteration -> call columns(index=2) -> return 'pure-u-1-6';
itemFour iteration -> call columns(index=3) -> return 'pure-u-1-6';
itemFive iteration -> call columns(index=4) -> return 'pure-u-1-6';
itemSix iteration -> call columns(index=5) -> return 'pure-u-1-6';
itemSeven iteration -> call columns(index=6) -> return 'pure-u-1-1';

Answer 1

你可以用HTML本身来处理它，如下所示，

 <div *ngFor="let ex of exs; let i = index; trackBy: index"    
       [className]="i < exs.length-1 ? 'pure-u-1-6': 'pure-u-1-1' ">
    {{ex.name}} | {{ex.parts}}
  </div>

要么

columns(index) {


    private _className: string = "pure-u-";

    let _class: string;
    if (index < this.exs.length-1) {
          _class = this._className + "1-6"  
    } else {
          _class = this._className + "1-" + this.exs.length-index;
    }

    return _class;
}

Answer 2

你可以通过使用ngClass指令和ngFor变量来解决这个问题，如first，last，even和odd。你的代码的基础只有最后一个元素得到了不同的类

<main class="pure-g">
  <div *ngFor="let ex of exs; let i = index;let last=last;trackBy: index" 
          [ngClass]='{'pure-u-1-6' : !last, 'pure-u-1-1':last}'> 
    {{ex.name}} | {{ex.parts}}
  </div>
</main>

调用像这样的[className]='columns(i)'这样的方法是没有效果的，因为它会在每个变化检测周期中调用