Angular项目表格加载站点数据后新增行无单元格值显示问题

问题根源 #

你遇到的空行问题是两个基础错误共同导致的：

1. 往站点数组中插入的是嵌套数组而非直接的站点对象
2. 表头的字段名和你存储的站点对象属性名不匹配，模板无法读取到对应值

具体错误说明 #

• 错误1：getStations方法中你将临时站点对象用[]包裹成了数组，再push到stationsArray中，最终数组结构变成[[{站点1}], [{站点2}]]，模板循环时拿到的row实际是内层数组，自然读不到属性
• 错误2：headers数组的项是Station ID（带空格），但你存储的站点对象属性是Station_ID（带下划线），键名完全不对应，模板取值时返回undefined所以显示空

修正代码 #

1. 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 = [
    { label: 'Station ID', field: 'Station_ID' },
    { label: 'Station Name', field: 'Station_Name' },
    { label: 'Distance', field: '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) =>{
          const distance = getDistanceFromLatLonInKm(this.getLat, this.getLong, station.LAT, station.LON);
          if(distance <= 30){
            const station_id = `${station.USAF}${station.WBAN}`;
            // 去掉外层数组包装，直接存储站点对象
            const tempObj = {
              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; // 单位为千米，原注释有误
  const φ1 = lat1 * Math.PI/180;
  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));

  let d = R * c; // 单位为千米
  d = d/1.609344 // 转换为英里
  return d;
}

2. stations.components.html 修改

注意：Angular组件模板不需要写完整的html、head、body标签，这部分属于全局index.html的内容，样式建议放到对应的css文件中即可

<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.label}}
        </th>
    </tr>

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

内容的提问来源于stack exchange，提问作者Hammy