Мне нужно отобразить таблицу с пустыми ячейками, и когда я нажимаю кнопку «Рассчитать», мне нужно получить данные из файла json.
inputselection.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DataService } from "src/app/earlysizing/data.service"
@Component({
selector: 'app-inputselection',
templateUrl: './inputselection.component.html',
styleUrls: ['./inputselection.component.scss']
})
export class InputselectionComponent implements OnInit {
messageForm: FormGroup;
submitted = false;
success = false;
public closestbenchmarks = [];
constructor(
private formBuilder: FormBuilder,
private _emp: DataService
) {}
ngOnInit() {
}
onCalculate() {
this.submitted = true;
if (this.messageForm.invalid) {
return;
}
this._emp.getClosestBenchMarks().subscribe(data =>
{
this.closestbenchmarks = data;
console.log('DATA', data);
});
//alert("SUCCESS!! :-)\n\n" + JSON.stringify(this.messageForm.value));
this.success = true;
//console.log("Valid");
}
}
inputselection.component.html
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2"></th>
<th class="text-center" colspan="5" >Closest Benchmarks</th>
</tr>
<tr>
<th scope="col">First Closest</th>
<th scope="col">Second Closest</th>
<th scope="col">Third Closest</th>
<th scope="col">Fourth Closest</th>
<th scope="col">Fifth Closest</th>
</tr>
</thead>
<tbody *ngFor="let c of closestbenchmarks">
<tr>
<td scope="row">Name</td>
<td>{{c.name.firstClosest}}</td>
<td>{{c.name.secondClosest}}</td>
<td>{{c.name.thirdClosest}}</td>
<td>{{c.name.fourthClosest}}</td>
<td>{{c.name.fifthClosest}}</td>
</tr>
<tr>
<td scope="row">Global Reporting Brand</td>
<td>{{c.globalReportingBrand.firstClosest}}</td>
<td>{{c.globalReportingBrand.secondClosest}}</td>
<td>{{c.globalReportingBrand.thirdClosest}}</td>
<td>{{c.globalReportingBrand.fourthClosest}}</td>
<td>{{c.globalReportingBrand.fifthClosest}}</td>
</tr>
<tr>
<td scope="row">Launch Timing</td>
<td>{{c.launchTiming.firstClosest}}</td>
<td>{{c.launchTiming.secondClosest}}</td>
<td>{{c.launchTiming.thirdClosest}}</td>
<td>{{c.launchTiming.fourthClosest}}</td>
<td>{{c.launchTiming.fifthClosest}}</td>
</tr>
<tr>
<td scope="row">Country</td>
<td>{{c.country.firstClosest}}</td>
<td>{{c.country.secondClosest}}</td>
<td>{{c.country.thirdClosest}}</td>
<td>{{c.country.fourthClosest}}</td>
<td>{{c.country.fifthClosest}}</td>
</tr>
<tr>
<td scope="row">Segment</td>
<td>{{c.segment.firstClosest}}</td>
<td>{{c.segment.secondClosest}}</td>
<td>{{c.segment.thirdClosest}}</td>
<td>{{c.segment.fourthClosest}}</td>
<td>{{c.segment.fifthClosest}}</td>
</tr>
<tr>
<td scope="row">Distribution Level</td>
<td>{{c.distributionLevel.firstClosest}}</td>
<td>{{c.distributionLevel.secondClosest}}</td>
<td>{{c.distributionLevel.thirdClosest}}</td>
<td>{{c.distributionLevel.fourthClosest}}</td>
<td>{{c.distributionLevel.fifthClosest}}</td>
</tr>
<tr>
<td scope="row">Serving</td>
<td>{{c.serving.firstClosest}}</td>
<td>{{c.serving.secondClosest}}</td>
<td>{{c.serving.thirdClosest}}</td>
<td>{{c.serving.fourthClosest}}</td>
<td>{{c.serving.fifthClosest}}</td>
</tr>
<tr>
<td scope="row">Flavour(s)</td>
<td>{{c.flavour.firstClosest}}</td>
<td>{{c.flavour.secondClosest}}</td>
<td>{{c.flavour.thirdClosest}}</td>
<td>{{c.flavour.fourthClosest}}</td>
<td>{{c.flavour.fifthClosest}}</td>
</tr>
<tr>
<td scope="row">Package Type</td>
<td>{{c.packageType.firstClosest}}</td>
<td>{{c.packageType.secondClosest}}</td>
<td>{{c.packageType.thirdClosest}}</td>
<td>{{c.packageType.fourthClosest}}</td>
<td>{{c.packageType.fifthClosest}}</td>
</tr>
<tr>
<td scope="row">Price Tier</td>
<td>{{c.priceTier.firstClosest}}</td>
<td>{{c.priceTier.secondClosest}}</td>
<td>{{c.priceTier.thirdClosest}}</td>
<td>{{c.priceTier.fourthClosest}}</td>
<td>{{c.priceTier.fifthClosest}}</td>
</tr>
<tr>
<td scope="row">Carbonated?</td>
<td>{{c.carbonated.firstClosest}}</td>
<td>{{c.carbonated.secondClosest}}</td>
<td>{{c.carbonated.thirdClosest}}</td>
<td>{{c.carbonated.fourthClosest}}</td>
<td>{{c.carbonated.fifthClosest}}</td>
</tr>
<tr>
<td scope="row">Pack Size(S)</td>
<td>{{c.packSize.firstClosest}}</td>
<td>{{c.packSize.secondClosest}}</td>
<td>{{c.packSize.thirdClosest}}</td>
<td>{{c.packSize.fourthClosest}}</td>
<td>{{c.packSize.fifthClosest}}</td>
</tr>
<tr>
<td scope="row">Volume % Share vs. Segment</td>
<td>{{c.volumeShareKgVsSegment.firstClosest}}</td>
<td>{{c.volumeShareKgVsSegment.secondClosest}}</td>
<td>{{c.volumeShareKgVsSegment.thirdClosest}}</td>
<td>{{c.volumeShareKgVsSegment.fourthClosest}}</td>
<td>{{c.volumeShareKgVsSegment.fifthClosest}}</td>
</tr>
<tr>
<td scope="row">Value % Share (USD) vs. Segment</td>
<td>{{c.valueShareUSDVsSegment.firstClosest}}</td>
<td>{{c.valueShareUSDVsSegment.secondClosest}}</td>
<td>{{c.valueShareUSDVsSegment.thirdClosest}}</td>
<td>{{c.valueShareUSDVsSegment.fourthClosest}}</td>
<td>{{c.valueShareUSDVsSegment.fifthClosest}}</td>
</tr>
<tr>
<td scope="row">Launch Year Volume Sales (MM)</td>
<td>{{c.launchYearVolumeSales.firstClosest}}</td>
<td>{{c.launchYearVolumeSales.secondClosest}}</td>
<td>{{c.launchYearVolumeSales.thirdClosest}}</td>
<td>{{c.launchYearVolumeSales.fourthClosest}}</td>
<td>{{c.launchYearVolumeSales.fifthClosest}}</td>
</tr>
<tr>
<td scope="row">Launch Year Value Sales ($MM USD)</td>
<td>{{c.launchYearValueSales.firstClosest}}</td>
<td>{{c.launchYearValueSales.secondClosest}}</td>
<td>{{c.launchYearValueSales.thirdClosest}}</td>
<td>{{c.launchYearValueSales.fourthClosest}}</td>
<td>{{c.launchYearValueSales.fifthClosest}}</td>
</tr>
</tbody>
</table>
<button type="button" class="button btn-lg">Calculate</button>
Мне нужно отобразить таблицу с загрузкой пустых ячеек, и когда я нажимаю кнопку «Рассчитать», мне нужно получить данные JSON.
До: До
После: После