Angular Array display on html

Question

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 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 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)

  }

}

@Drenai could you give me a exapmple, im a beginner in angular — du7ri
– du7ri, Commented Jul 3, 2022 at 15:31

anthonyb · Accepted Answer · 2022-07-03 15:27:47Z

1

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.

answered Jul 3, 2022 at 15:27

anthonyb

3443 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

du7ri Over a year ago

how could i say that when the inner of calculation is index 2, it should be called hight, instead of size?

anthonyb Over a year ago

instead of "Size", you can write {{ i == 2 ? "Height" : "Size" }}. look up ternary expressions. that should work...

du7ri Over a year ago

thanks for the suggestions, i look up to ternary expressions

Collectives™ on Stack Overflow

Angular Array display on html

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related