ngFor - 根据索引打印数组项

Question

我有一个ngFor循环，它循环遍历对象列表(称为configs)并打印每个对象的数据。

我还有一个在TypeScript文件中的数组需要打印。该数组与“configs”列表具有相同的长度(并且始终具有相同的长度)。这是我的HTML文件的ngFor:

<button *ngFor="let config of configs; let i = index" type="button" style="text-align:left; margin-right: 10px; margin-bottom: 10px" class="btn btn-primary">
        Name: {{config.name}} <br /> Op Point: //Op Point ARRAY OBJECT HERE BASED ON INDEX// <br /> 
</button>

我在上面的代码片段中放置了"//根据索引在此处放置数组对象//"，以指明我想要从数组中打印值的位置。我的TypeScript文件中的数组是一个名为configOpPoints的1x4 2D数组。

基本上，如何从configOpPoints数组中在我的现有ngFor中打印数据？我尝试了'configOpPoints[i]'但没有起作用。

- Roka545

---

可能是 在 *ngFor 中迭代两个数组-- IONIC2/Angular2 的重复问题。 - Jarod Moser

查看这个答案。 - Jarod Moser

Answer 1

我不确定这是否符合您的要求：

import { Component } from '@angular/core';

export class Config {
  name:string;
}

@Component({
  selector: 'my-app',
  template: `
<h1>Angular 2 App - Test ngFor</h1>
<button *ngFor="let config of configs; let i = index" type="button" style="text-align:left; margin-right: 10px; margin-bottom: 10px" class="btn btn-primary">
        Name: {{config.name}} <br /> {{configOpPoints[i]}} <br /> 
</button>
`
})
export class AppComponent { 
  configs:Config = [
    {name: 'config1'}, 
    {name: 'config2'}, 
    {name: 'config3'}
  ];
  configOpPoints:Array = [
    [ 1, [ 'op1', 'OP1', 12, 23] ],
    [ 2, [ 'op2', 'OP2', 32, 43] ],
    [ 3, [ 'op3', 'OP3', 52, 63] ]
  ];
}

查看此Plnkr的运行版本：http://plnkr.co/edit/m5RhEElElHj0pVTPx5Tc?p=preview

- Gabi