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

Question

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

这是我的组件 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;
}

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

pure-u-1-1 

对于每一项，函数的执行似乎返回绑定(bind)到所有项的 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;
}