Angular数组显示在html上

Question

我创建了一个数组，其中存储有3个索引的数组。例如

(3) [Array(3), Array(3), Array(3)]
0: (3) [199.4, 10.5, 19]
1: (3) [47.2, 2.1, 23]
2: (3) [133.6, 5.3, 25]

在我的HTML中，我想以如下方式显示

size: 199,4 
size2: 10,5
size 3: 19

我的HTML是这样的:

<div [hidden]="isShowDiv" >
<div class="list-group" *ngFor="let calculation of arr_name ">
<a  class="list-group-item list-group-item-action" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">{{arr_name}}</h5>             
</div>

</a>

现在我的问题，我知道我必须显示3的数组长度，通过*ngFor="let calculation of arr_name ">，因为我存储在我的数组3其他数组，但当我这样做，我得到以下输出:

199.4,10.5,19,47.2,2.1,23,133.6,5.3,25
199.4,10.5,19,47.2,2.1,23,133.6,5.3,25
199.4,10.5,19,47.2,2.1,23,133.6,5.3,25

我也知道我可以通过{{arr_name[0][0]}}来声明显示我199.4的html，但是数组大小可能会增加，我想显示所有值。有一个共同的方法吗?

my.componet.ts:

import { Component, OnInit } from '@angular/core';
import { Position } from '../position';
import { Positions } from '../mock-positions';
import { Calculations } from '../mock-calculations';
import { Router } from '@angular/router';
import { Calc } from '../calc';
@Component({
selector: 'app-create-position',
templateUrl: './create-position.component.html',
styleUrls: ['./create-position.component.css']
})
export class CreatePositionComponent implements OnInit  {
isShowDiv = true;
constructor(private router:Router) { }
arr_name:number[][]=[  ]
ngOnInit(): void {
}
calculate( ) {

this.isShowDiv = !this.isShowDiv;

this.sortArray()
for(let i = 0; i < Positions.length - 1; i++) {

//console.log(Positions[i].lat +" "+ Positions[i + 1].lat)
var dy_ = 111.3 * (Positions[i].lat - Positions[i + 1].lat)
var lat_ = (Positions[i].lat + Positions[i + 1].lat) / 2 * 0.01745
var dx_ = 111.3 * Math.cos(lat_) * (Positions[i].lng - Positions[i + 1].lng)
var distance_ = Math.sqrt(dx_ * dx_ + dy_ * dy_)
var distance_ = distance_ * 1000 
var distanceRounded: number =+distance_.toFixed(1);
var startTime = Positions[i].time.toString()
var endTime = Positions[i+1].time.toString()
var starTimeCalc = new Date(startTime)
var endTimeCalc = new Date(endTime)
var sBetweenPos = endTimeCalc.valueOf() - starTimeCalc.valueOf();
sBetweenPos= sBetweenPos * 0.001
var duration = distanceRounded / sBetweenPos
var durationRounded: number =+duration.toFixed(1)

this.calc_.distanceRounded=distanceRounded
this.calc_.durationRounded=durationRounded
this.calc_.sBetweenPos=sBetweenPos
this.arr_name.push([this.calc_.distanceRounded, this.calc_.durationRounded,this.calc_.sBetweenPos])
}
console.log(this.arr_name)
}
}

Answer 1

如果您想访问嵌套数组，您需要这样做:

<div *ngFor="let calculation of arr_name">
<div *ngFor="let inner of calculation; let i = index">
Size {{ i }}: {{ inner }}
</div>
</div>

还建议将计算抽象到一个服务文件中。