Question

我创建了此表：

我试图做的是：单击表格上方的“更改1次最高管理价值”，然后更改单元格第1行的值。但是，我做不到。

这是html代码：

   <button (click)="DisplayReceivedDataValues()">Change 1 jour Top Management Value</button>
        <div class="row">
          <div class="col-md-12">
            <div class="card-plain">
              <div class="header">
                <div class="typo-line">
                  <h4 class="text-center text-info">
                    TOTAL
                  </h4>
                </div>
              </div>
              <div class="content table-responsive table-full-width">
                <table class="table table-striped">
                  <thead>
                    <tr>
                      <th scope="row">Profile</th>
                      <th scope="row" *ngFor="let cell of tableData1.headerRow">
                        {{ cell }}
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row">{{ tableData1.leftSideColumn[0] }}</th>
                      <td >{{unJourValues[0][0]}}</td>
                      <td >{{deuxTroisJoursValues[0][0]}}</td>
                      <td >{{quatreCinqJoursValues[0][0]}}</td>
                      <td >{{uneSemaineValues[0][0]}}</td>
                      <td >{{deuxSemainesValues[0][0]}}</td>
                      <td >{{unMoisPlusValues[0][0]}}</td>
                    </tr>
                    <tr>
                      <th scope="row">{{ tableData1.leftSideColumn[1] }}</th>
                      <td >{{unJourValues[0][1]}}</td>
                      <td >{{deuxTroisJoursValues[0][1]}}</td>
                      <td >{{quatreCinqJoursValues[0][1]}}</td>
                      <td >{{uneSemaineValues[0][1]}}</td>
                      <td >{{deuxSemainesValues[0][1]}}</td>
                      <td >{{unMoisPlusValues[0][1]}}</td>
                    </tr>
                    <tr>
                      <th scope="row">{{ tableData1.leftSideColumn[2] }}</th>
                      <td >{{unJourValues[0][2]}}</td>
                      <td >{{deuxTroisJoursValues[0][2]}}</td>
                      <td >{{quatreCinqJoursValues[0][2]}}</td>
                      <td >{{uneSemaineValues[0][2]}}</td>
                      <td >{{deuxSemainesValues[0][2]}}</td>
                      <td >{{unMoisPlusValues[0][2]}}</td>
                    </tr>
                    <tr>
                      <th scope="row">{{ tableData1.leftSideColumn[3] }}</th>
                      <td >{{unJourValues[0][3]}}</td>
                      <td >{{deuxTroisJoursValues[0][3]}}</td>
                      <td >{{quatreCinqJoursValues[0][3]}}</td>
                      <td >{{uneSemaineValues[0][3]}}</td>
                      <td >{{deuxSemainesValues[0][3]}}</td>
                      <td >{{unMoisPlusValues[0][3]}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

DisplayReceivedDataValues定义：

 DisplayReceivedDataValues(){
    this.unJourValues[0][0]=15
    console.log('unJourValues: ', this.unJourValues[0][0]);
  }

有人知道为什么新值15不显示在第一行的第一个单元格中吗？
属性绑定不应该使这项工作吗？

Answer 1

如果更改数组，Angular不会检测到更改。替换

    this.unJourValues[0][0]=15

类似

    this.unJourValues = this.unJourValues.map((row, index) => index === 0
        ? /* new values here */
        : row);

角度属性绑定无法正常工作

1 个答案: