I have created an array that stores multiple arrays with 3 indexes each. An example of the structure looks like this:
(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 in the following format:
Size: 199.4
Size2: 10.5
Size 3: 19
This is how my HTML code looks:
<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>
Now, my question is, although I know I need to use
*ngFor="let calculation of arr_name ">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 understand that I can access individual values like {{arr_name[0][0]}} which displays 199.4, but since the array size may increase, I want a way to display all values dynamically. Is there a common approach for this?
This is my component.ts file:
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)
}
}