html - ngFor - afișarea unui element dintr-un array după index

Am un ciclu ngFor care parcurge o listă de obiecte (numite configs) și afișează date pentru fiecare obiect.

De asemenea, am un array în fișierul meu TypeScript pe care aș dori să-l afișez și pe acesta. Array-ul are aceeași lungime ca lista 'configs' (și va avea întotdeauna aceeași lungime). Iată ngFor-ul din fișierul meu HTML:

<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>

Am plasat „//Op Point ARRAY OBJECT HERE BASED ON INDEX//” în fragmentul de cod de mai sus pentru a indica unde vreau să afișez valorile dintr-un array. Array-ul din fișierul meu TypeScript este un array 2D 1x4 numit configOpPoints.

Practic, cum pot să afișez date în ngFor-ul meu existent din array-ul configOpPoints? Am încercat 'configOpPoints[i]', dar nu a funcționat.

Răspuns #1

Nu sunt sigur dacă acesta este ceea ce cauți:

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

verifică acest plnkr pentru o versiune funcțională: http://plnkr.co/edit/m5RhEElElHj0pVTPx5Tc?p=preview