Angular Array display on html-CodePudding

i created a array that stores arrays with 3 indexes into it. a example looks like

(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]

in my html i want to display it follwing way

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

my html looks like this:

<div [hidden]="isShowDiv" >
        <div  *ngFor="let calculation of arr_name ">
            <a   aria-current="true">
              <div >
                <h5 >{{arr_name}}</h5>             
              </div>
              
            </a>

now to my question, i know i have to display the array length with 3, via *ngFor="let calculation of arr_name "> because im storing inside my array 3 other arrays, but when i do it i get following output:

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

i also know that i can declare the html via {{arr_name[0][0]}} what diplays me 199.4, but the array size could increase, and i want to display all values. is there a common way?

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)

  }

}

CodePudding user response：

if you want to access nested arrays, you need to do something like this:

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

also recommend abstracting your calculations into a service file.