Html – ngFor – printing an array item by index

angularangularjsarrayshtmltypescript

I have an ngFor loop that loops through a list of objects (called configs) and prints data for each object.

I also have an array in my TypeScript file that I would like to print as well. The array has the same length as the 'configs' list (and will always have the same length). Here's my HTML file's 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>

I've placed "//Op Point ARRAY OBJECT HERE BASED ON INDEX//" in the code snippet above to point out where I want to print values from an array. The array in my TypeScript file is a 1×4 2D array named configOpPoints.

Basically, how can I print data in my existing ngFor from the configOpPoints array? I tried 'configOpPoints[i]' but that didn't work.

Best Answer

I'm not sure if this is what you are after: 

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] ]
  ];
}

check this plnkr for a running version : http://plnkr.co/edit/m5RhEElElHj0pVTPx5Tc?p=preview

Related Topic