ngFor - Drucken eines Array-Elements nach Index

Question

Ich habe eine ngFor-Schleife, die eine Liste von Objekten durchläuft (so genannte Configs) und Daten für jedes Objekt ausgibt.

Ich habe auch ein Array in meiner TypScript-Datei, die ich auch gerne drucken würde. Das Array hat die gleiche Länge wie die Liste "configs" (und hat immer die gleiche Länge). Hier ist meine HTML-Datei des 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> 

ich gesetzt habe „// Op-Point Array-Objekt HIER AUF DER GRUNDLAGE INDEX //“ in dem Codeausschnitt oben zu zeigen, wo ich Werte aus einem Array drucken mag. Das Array in meiner TypeScript-Datei ist ein 1x4-2D-Array namens configOpPoints.

Wie kann ich Daten in meinem vorhandenen ngFor aus dem Array configOpPoints ausgeben? Ich habe 'configOpPoints [i]' versucht, aber das hat nicht funktioniert.

Answer 1

Ich bin mir nicht sicher, ob dies ist, was Sie nach:

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

Überprüfung dieses plnkr für eine laufende Version: http://plnkr.co/edit/m5RhEElElHj0pVTPx5Tc?p=preview