ngFor - 按索引打印数组项

Posted 2023-02-22

【中文标题】ngFor - 按索引打印数组项

【英文标题】：ngFor - printing an array item by index

【发布时间】：2016-11-03 04:10:17

【问题描述】：

我有一个 ngFor 循环，它遍历对象列表（称为配置）并打印每个对象的数据。

我的 TypeScript 文件中还有一个我想打印的数组。该数组与“配置”列表具有相同的长度（并且始终具有相同的长度）。这是我的 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>

我在上面的代码 sn-p 中放置了“//Op Point ARRAY OBJECT HERE BASED ON INDEX//”，以指出我想从数组中打印值的位置。我的 TypeScript 文件中的数组是一个名为 configOpPoints 的 1x4 二维数组。

基本上，如何从 configOpPoints 数组中打印现有 ngFor 中的数据？我试过 'configOpPoints[i]' 但没用。

【问题讨论】：

Iterate two arrays in *ngFor-- IONIC2/Angular2的可能重复

查看this 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