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>

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

基本上，如何从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

ngFor - 按索引打印数组项

1 个答案: