I have a .Net Core app that utilizes the following syntax for creating rows in an HTML table:
@if (Model != null)
{
for (int i = 0; i < @Model.ProgramScorecardModel.Count; i++)
{
<tr>
<td rowspan="2" style="text-align: left; border: 1px solid black;padding-left: 5px">
@Model.ProgramScorecardModel[i].reportGroup
<input id="authorized_@(i)" name="authorized_@(i)" hidden="hidden" value="@Model.ProgramScorecardModel[i].authorized" />
</td>
<td rowspan="2" style="text-align: left; border: 1px solid black;padding-left: 5px">@Model.ProgramScorecardModel[i].id</td>
<td rowspan="2" style="text-align: left; border: 1px solid black; padding-left: 5px">@Model.ProgramScorecardModel[i].programName</td>
@{string results = Model.ProgramScorecardModel[i].REQ_STAB_ViewModel[0].rating;
decimal number1 = 0;
string number_str = "";
bool canConvert = decimal.TryParse(@Model.ProgramScorecardModel[i].AB_ViewModel[0].results.ToString(), out number1);
if (canConvert == true && (results == "R" || results == "Y" || results == "G") && number1 >= 0)
{
number_str = String.Format("{0:0.##}", (number1 * 100)) + "%<br>";
}
I know in Angular I can utilize the *ngFor, but it has to be tied to a DOM element like this.
<tr *ngFor="let hero of heroes">
<td>{{hero.name}}</td>
</tr>
This however doesn't allow me to create multiple rows and cells for the same array index
Is there a way to do what I do in a Razor page with Angular?