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

【问题标题】：Angular 2 Return value from function call for each item in ngForAngular 2从ngFor中每个项目的函数调用返回值
【发布时间】：2017-03-12 02:24:13
【问题描述】：

我正在使用带有 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;
}

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

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

【问题讨论】：

你到底是什么？最后一段代码的确切输出？
正如我所提到的，这是我期望的输出：itemOne 迭代 -> 调用列（索引 = 0） -> 返回 'pure-u-1-6'; itemTwo 迭代 -> 调用列（索引 = 1） -> 返回 'pure-u-1-6'; itemThree 迭代 -> 调用列（index=2） -> return 'pure-u-1-6'; itemFour 迭代 -> 调用列（index=3） -> return 'pure-u-1-6'; itemFive 迭代 -> 调用列（索引 = 4） -> 返回 'pure-u-1-6'; itemSix 迭代 -> 调用列（索引 = 5） -> 返回 'pure-u-1-6'； itemSeven 迭代 -> 调用列(index=6) -> return 'pure-u-1-1';
在您的示例中，_reminder 将始终为 6。
它是动态的，规则是：第一行将被划分 1/of items 或 6 如果行已满。如果我有 8 个项目，6 个将有 pure-u-1-6，另外两个将有 pure-u-1-2。如果我有 9 个项目 6 将有 pure-u-1-6，其他三个将有 6 将有 pure-u-1-3 等等。

标签： javascript angular typescript ngfor

【解决方案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;
}

【讨论】：

是的，这是一种方法，但我更喜欢将逻辑与 DOM 分开。并做：“i

【解决方案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)' 因为它会在每个变化检测周期

【讨论】：