Question

我想根据输入的数据自动显示表格。

我想为状态对象的每个状态行添加一个值，例如状态Q0，状态Q1，状态Q2。

我想为每个单元格自动赋予自己唯一的ID

我尝试过的值=“ {{state.Q {{q}}}}-弹出错误。

 <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://imgur.com/qaoeCxx-我希望

[2]：https://imgur.com/7Vg0y0T-我有这个

Answer 1

您可以尝试使用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>

这里是Stackblitz example

在Angular对象的属性上动态创建数组

1 个答案: