I am looking to automatically display a table based on the inputted data.
I want to assign a value to each state line within the state object, such as state.Q0, state.Q1, state.Q2.
Additionally, I would like each cell to be automatically given a unique id.
When I tried using value = "{{state.Q {{q}}}}, I encountered an error.
<table class="table">
<thead>
<tr>
<ng-container *ngFor="let header of stateColumn">
<th>
<abbr title="State no.">{{header}}</abbr>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let column of stateColumn;let colum=index">
<ng-container *ngFor="let state of initTestTabelMT; let i=index">
<tr id="{{i}}">
<td id="{{i}}">
<div [style.background-color]="getBackgroundColor()">
<input type="text" value="{{state.Q1}}"> <-- HERE
============
value="{{state.Q{{q}} }}" <-- Doesnt working
value="{{state.Q}}{{q}}" <-- Doesnt working
</div>
</td>
</tr>
</ng-container>
</ng-container>
</tbody>
</table>
this.stateColumn :
(6) ["0", "1", "2", "3", "4", "5"]
0: "0"
1: "1"
2: "2"
3: "3"
4: "4"
5: "5"
length: 6
this.initTestTabelMT
(3) [{…}, {…}, {…}]
0: {Q0: "q0/a/P", Q1: "q1/a/P", Q2: "q2/a/P", Q3: "q3/a/P", Q4: "q5/A/#", …}
1: {Q0: "q0/a/P", Q1: "q1/a/P", Q2: "q2/a/P", Q3: "q3/a/P", Q4: "q5/A/#", …}
2: {Q0: "q0/a/P", Q1: "q1/a/P", Q2: "q2/a/P", Q3: "q3/a/P", Q4: "q5/A/#", …}
[1]: https://i.sstatic.net/3hrZJ.jpg - I expect
[2]: https://i.sstatic.net/1dqV4.jpg - I have this