ngFor - 按索引打印数组项-Java 学习之路

我有一个ngFor循环遍历一个对象列表（称为configs）并打印每个对象的数据 .

我也在我的TypeScript文件中有一个数组，我也想打印 . 该数组与'configs'列表具有相同的长度（并且将始终具有相同的长度） . 这是我的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}} 
 Op Point: //Op Point ARRAY OBJECT HERE BASED ON INDEX// 
 
</button>

我在上面的代码片段中放置了“// Op Point ARRAY OBJECT HERE Based in INDEX //”，指出我想从数组中打印值的位置 . 我的TypeScript文件中的数组是一个名为configOpPoints的1x4 2D数组 .

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

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}} 
 {{configOpPoints[i]}} 
 
</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

回复于 2024-04-23T17:12:31+08:00

ngFor - 按索引打印数组项

1 回答

相关问题