Table not updating in angular-CodePudding

I have an angular program that on one component converts a zip code to lat and long and sends to another component. on the second component it compares the lat and long to a list of stations to find stations with in a certain distance, say 30 miles. it then takes those values and places those stations into an array. i have created a table which shows just the headers and upon a button click is to add the rows of values to the table however the rows are being added but there are no values being displayed in the cells. here is my code:

stations.components.ts

import { SelectionModel } from '@angular/cdk/collections';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-stations',
  templateUrl: './stations.component.html',
  styleUrls: ['stations.component.css']
})

export class StationsComponent implements OnInit {
  
  //variables
  getLat:any;
  getLong:any;
  stationsArray: any[] = [];
  headers = ['Station ID', 'Station Name', 'Distance']
  
  constructor(
    private route: ActivatedRoute,
    ) 
    {}

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      this.getLat = params.dataLat;
      this.getLong = params.dataLong;
      console.log(params); 
    });
  }

  getStations(){    
    fetch("assets/text_files/ISD_US_Station_List.json")
      .then((res) => res.json())
      .then((data) =>{
        data.forEach((station: any) =>{
          if(getDistanceFromLatLonInKm(this.getLat, this.getLong, station.LAT, station.LON) <= 30){
            var distance = getDistanceFromLatLonInKm(this.getLat, this.getLong, station.LAT, station.LON);
            var station_id = `${station.USAF}${station.WBAN}`;
            var tempObj: any []= [{
              Station_ID: station_id,
              Station_Name: station.Station_Name,
              Distance: distance 
            }];
            
            this.stationsArray.push(tempObj);
          }
        });    
      })
      console.log(this.stationsArray);
    }
    
    displayedColumns: string[] = ['Station_ID', 'Station_Name', 'Distance'];
    dataSource = this.stationsArray;
}

function getDistanceFromLatLonInKm(lat1: number,lon1: number,lat2: number,lon2: number) {
  const R = 6371; // metres
  const φ1 = lat1 * Math.PI/180; // φ, λ in radians
  const φ2 = lat2 * Math.PI/180;
  const Δφ = (lat2-lat1) * Math.PI/180;
  const Δλ = (lon2-lon1) * Math.PI/180;

  const a = Math.sin(Δφ/2) * Math.sin(Δφ/2)  
            Math.cos(φ1) * Math.cos(φ2) *
            Math.sin(Δλ/2) * Math.sin(Δλ/2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

  var d = R * c; // in metres
  d = d/1.609344 //convert to miles
  return d;
}

stations.components.html

<!DOCTYPE html>
<html lang="en">
<head>

    <style>
        .center {
        display: flex;
        justify-content: center;
        }
  
        .button1 {
            border-radius: 12px; background-color: #F44848;
        }

        .button {
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

    </style>
    
</head>
<body>
    <div class="center" style="margin-top:100px;">
        <button class="button button1" (click)="getStations()"><b>Test Stations</b></button>
    </div>

    <h1>Stations in the Area</h1>
    <table>
        <tr>
            <th *ngFor = "let column of headers">
                {{column}}
            </th>
        </tr>

        <tr *ngFor = "let row of stationsArray">
            <td *ngFor = "let column of headers"> 
                {{row[column]}} 
            </td>
        </tr>
    </table>
  
</body>

</html>

before pressing the button before after pressing the button after

CodePudding user response：

You are trying to display the data with {{row[column]}} but there are 2 errors with this:

row is not an object, but an array of length 1 with the object inside
The stationsArray has the attributes named with and underscore instead of whitespaces

So. replace

<td *ngFor = "let column of headers"> 
  {{row[column]}} 
</td>

with

<td>{{row[0]["Station_ID]}}</td>
<td>{{row[0]["Station_Name]}}</td>
<td>{{row[0]["Distance]}}</td>

Or use the displayedColumns variable that is actually never used.