How to display selected values in Angular Materials table? - html

Question

I am attempting to display values as follows:
Asteroid Number
Selected Value
1566
some value
1842
some value
etc.
some value
Here are the HTML and TypeScript:
TypeScript
import { Asteroid } from '../models/asteroid.model';
import { DataSource } from "#angular/cdk/collections";
import { MatTableDataSource } from '#angular/material/table';
import { BehaviorSubject, Observable } from 'rxjs';
import { AsteroidService } from '../_services/asteroid.service';
import { AsteroidCharacteristics } from '../enums/characteristic.enum';
import { FormControl } from '#angular/forms';
#Component({
selector: 'app-asteroid-details',
templateUrl: './asteroid-details.component.html',
styleUrls: ['./asteroid-details.component.scss']
})
export class AsteroidDetailsComponent implements OnInit {
dataSource = new AsteroidDataSource(this.asteroidService);
optionsForm: FormControl = new FormControl();
displayedColumns: string[] = ["name", "characteristics"];
charOptions: string[] = [
AsteroidCharacteristics.semimajor_axis,
AsteroidCharacteristics.eccentricity,
AsteroidCharacteristics.perihelion_distance,
AsteroidCharacteristics.perihelion_date,
AsteroidCharacteristics.aphelion_distance,
AsteroidCharacteristics.aphelion_date,
AsteroidCharacteristics.delta_v,
AsteroidCharacteristics.diameter,
AsteroidCharacteristics.price,
AsteroidCharacteristics.mass
];
constructor(private readonly asteroidService: AsteroidService) { }
ngOnInit(): void {
}
}
export class AsteroidDataSource extends DataSource<any> {
data = new BehaviorSubject<Array<Asteroid>>(undefined);
variable = getSelection();
constructor(private readonly asteroidService: AsteroidService) {
super();
asteroidService.asteroidData.subscribe(res => this.data.next(res));
}
connect(): Observable<Array<Asteroid>> {
console.log("data:" + this.data);
return this.data;
}
disconnect() {}
getSelection(value){
if (value == "Semimajor Axis"){
var select = "semimajor";
}
else if (value == "Eccentricity"){
var select = "eccentricity";
}
else if (value == "Perihelion Distance"){
var select = "perihelion_distance";
}
else if (value == "Perihelion Date"){
var select = "perihelion_date";
}
else if (value == "Aphelion Distance"){
var select = "aphelion_distance";
}
else if (value == "Aphelion Date"){
var select = "aphelion_date";
}
else if (value == "Velocity"){
var select = "delta_v";
}
else if (value == "Diameter"){
var select = "diameter";
}
else if (value == "Price"){
var select = "price";
}
else if (value == "Mass"){
var select = "mass";
}
return select;
};
}
HTML
<p>asteroid-details table</p>
<!-- <table mat-table #table [dataSource]="asteroidDetailsList" class="mat-elevation-z8" matSort>
</table> -->
<table mat-table [dataSource] = "dataSource">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Asteroid Name </th>
<td mat-cell *matCellDef="let asteroid"> {{ asteroid.number }} </td>
</ng-container>
<ng-container matColumnDef="characteristics">
<th mat-header-cell *matHeaderCellDef>
<mat-form-field appearance="fill">
<mat-select placeholder="Characteristic"[formControl]="optionsForm">
<mat-option>None</mat-option>
<mat-option *ngFor="let char of charOptions" [value]="char">{{ char }}</mat-option>
</mat-select>
</mat-form-field>
</th>
<td mat-cell *matCellDef="let asteroid"> {{ asteroid.variable }} </td>
</ng-container>
<!-- <ng-container *ngFor="optionsForm.value === 'Mass'">
<tr mat-row *ngFor="let asteroid of asteroidData">asteroid.mass</tr>
</ng-container> -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
More specifically, how can I assign a value from the selection to the table? If I manually enter a value (asteroid.eccentricity or asteroid.semimajor_axis) it correctly displays the values.
Many thanks!