Angular Ошибка таблицы материалов: не удается найти столбец с идентификатором

Question

Я учусь работать с angular таблицами материалов. Я создаю его на основе средней статьи , и пока мой код выглядит так:

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'}
}
]

'Надеюсь, это поможет.