Angular2：使用 *ngFor 反向显示 2 个数组作为键值对

Question

例如我有 2 个数组

["A", "B", "C", "D", "E"]
[1, 2, 3, 4, 5]

如何使用 *ngFor 以相反的顺序将它们显示为键值对？喜欢E:5D:4......

Answer 1

您可能想尝试编写一个包含两个数组和 returns 排序键值对数组的组件函数。在您的函数中执行所有基本错误检查，然后在您的视图中简单地调用您的函数，类似于：

*ngFor="let keypair of getKeyPairs(charArray, intArray)"

angular1 中的排序管道已从 angular2 中删除，因此您必须自己实施排序。

Answer 2

使用*ngFor的索引语法。这是 *ngFor 的 document。并且不要忘记对目标数组使用 array.reverse。

<div *ngFor="let item of testArray; let i = index">
    {{ testArray[i] }} : {{ testArray2[i] }}
</div>

Answer 3

您可以使用 Array.prototype.reverse() 方法来反转值，然后您可以获得它：

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let str of strArr; let i=index">{{str}} : {{numArr[i]}}</li>
    </ul>
  `,
})
export class App {
  strArr: Array<string> = ["A", "B", "C", "D", "E"];
  numArr: Array<number> = [1, 2, 3, 4, 5];

  constructor() {
    this.strArr.reverse(); // reverse the values ["E", "D", "C", "B", "A"]
    this.numArr.reverse(); // reverse the values [5, 4, 3, 2, 1]
  }
}

Demo @Plnkr

Angular2：使用 *ngFor 反向显示 2 个数组作为键值对

Angular2: Display 2 arrays as key value pair in reverse with *ngFor

ngfor

angular