html - ngFor - 按索引打印数组项

Question

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

我的 TypeScript 文件中也有一个数组，我也想打印它。该数组的长度与“配置”列表的长度相同(并且始终具有相同的长度)。这是我的 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>

我在上面的代码片段中放置了“//Op Point ARRAY OBJECT HERE BASED ON INDEX//”以指出我想从数组中打印值的位置。我的 TypeScript 文件中的数组是一个名为 configOpPoints 的 1x4 二维数组。

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

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