ngFor - печать элемента массива по индексу

Question

У меня есть цикл ngFor, который перебирает список объектов (называемых configs) и печатает данные для каждого объекта.

У меня также есть массив в моем файле TypeScript, который я также хотел бы распечатать. Массив имеет ту же длину, что и список «configs» (и всегда будет иметь одинаковую длину). Вот ngFor моего 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> 

Я поставил «// Op точка ARRAY ОБЪЕКТ ЗДЕСЬ НА ОСНОВЕ INDEX //» в фрагменте кода выше, чтобы указать, где я хочу напечатать значения из массива. Массив в моем файле TypeScript представляет собой 2D-массив 1x4 с именем configOpPoints.

Как я могу напечатать данные в моем существующем ngFor из массива configOpPoints? Я попробовал '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