Question

我正在学习如何使用角度材料表。我正在基于medium article构建一个，到目前为止，我的代码如下：

TS：

 constructor(private nasaService: NasaService) {}
  
    dataSource = new MatTableDataSource<any>();
    roverData: Rover[];
      camera: string='';
      roverCams:string[]=['FHAZ', 'RHAZ', 'NAVCAM', 'MATS'];
      
      ngOnInit(): void {
            this.getRoverData();
          }
      
    
      getRoverData(){
        this.nasaService.getRoverData()
        .subscribe(data=>{
          this.roverData=data['photos'];
          console.log(this.roverData)
          
        })
      }
    }

和HTML，就像这样简单：

 <div class="container">
     <div class="row">
        
            <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" >
                        
                <ng-container *ngFor="let cam of roverData"  matColumnDef="{{cam.id}}">
                  <th mat-header-cell *matHeaderCellDef> {{cam.id}} </th>
                  <td mat-cell *matCellDef="let element" > <img src="{{element[cam.img_src]}}" class="img-fluid" alt=""> </td>
                </ng-container>
              
           
          
                <tr mat-header-row *matHeaderRowDef="roverCams"></tr>
                <tr mat-row *matRowDef="let row; columns: roverCams;"></tr>
              </table>
               
              
        </div>
    </div>

该应用已编译，但该表显示为空，并且在控制台中出现以下错误：core.js:6228 ERROR Error: Could not find a column with id "FHAZ".

这是我第一次处理此类API，因此我不理解错误，因为我正在逐步按照本教程进行操作。有人可以帮我吗？

Answer 1

构造函数（私有nasaService：NasaService）{}

    dataSource = new MatTableDataSource<any>();
    roverData: Rover[];
      camera: string='';

      roverCams:string[]=['FHAZ', 'RHAZ', 'NAVCAM', 'MATS'];
      
      ngOnInit(): void {
            this.getRoverData();
          }
      
    
      getRoverData(){
        this.nasaService.getRoverData()
        .subscribe(data=>{
          this.dataSource = data['photos'];
        })
      }
    }

您的模板：

<div class="container">
     <div class="row">
        
            <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" >
                        
                <ng-container *ngFor="let cam of roverCams"  matColumnDef="{{cam}}">
                  <th mat-header-cell *matHeaderCellDef> {{cam}} </th>
                  <td mat-cell *matCellDef="let element" > 
<img src="{{element[cam].img_src}}" class="img-fluid" alt=""> 
</td>
                </ng-container>
              
           
          
                <tr mat-header-row *matHeaderRowDef="roverCams"></tr>
                <tr mat-row *matRowDef="let row; columns: roverCams;"></tr>
              </table>
               
              
        </div>
    </div>

假设您的数据是这样的，例如：

[
{
'FHAZ':{img_src: 'img1.png'},
'RHAZ':{img_src: 'img2.png'},
'NAVCAM':{img_src: 'img3.png'},
'MATS':{img_src: 'img4.png'}
},
{
'FHAZ':{img_src: 'img12.png'},
'RHAZ':{img_src: 'img22.png'},
'NAVCAM':{img_src: 'img32.png'},
'MATS':{img_src: 'img42.png'}
}
]

'希望有帮助。

角度材质表错误：找不到ID为ID的列

1 个答案: