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

Question

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

Why is the title in Polish? Please edit it to translate it to English. Thanks! Edit: If the translation by Google Translate ("Enumerating object properties in the object properties in Angular HTML") is correct, you should try to make it clearer as well. — grooveplex
– grooveplex, Commented Jun 1, 2019 at 15:50

Bhagwat Tupe · Accepted Answer · 2019-06-01 17:13:26Z

2

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

answered Jun 1, 2019 at 17:13

Bhagwat Tupe

1,9631 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related