CODEWITHSUNDEEP
angulartypescriptloops
Simon
Simon

Reputation: 159

Dynamic creation of an array on the properties of an Angular object

I want to display the table automatically based on the entered data.

I want to add a value to every state line to the state object, e.g. state.Q0, state.Q1, state.Q2.

And I would like to give each cell automatically its own unique id

I've tried value = "{{state.Q {{q}}}} - An error pops up.

 <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

Upvotes: 0

Views: 67

Answers (1)

Bhagwat Tupe
Bhagwat Tupe

Reputation: 1943

You can try these use keyvalue

<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 >
    <tr *ngFor="let state of initTestTabelMT; let i=index">
      <td *ngFor="let s of state | keyvalue">
        <span [style.background-color]="getBackgroundColor()">
          <input type="text" value="{{s.value}}">
        </span>
      </td>
    </tr>
  </ng-container>       
 </tbody>
</table>

Here is a Stackblitz example

Upvotes: 2

Related Questions