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>

OR

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变量（如第一，最后，偶数和奇数）一起使用来解决此问题。在代码的基础上，只有最后一个元素具有不同的类

<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)'，因为它会在每个变更检测周期

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

2 个答案: