Angular4中点击对应按钮刷新或更新行数据

嘿，刚接手没Angular背景就搞这个，确实有点头大，我给你拆解成两个核心问题一步步解决，保证你能看懂：

一、先解决「创建Wall后数据不刷新」的问题 #

Angular有个核心机制叫变更检测——简单说就是它会盯着你的数据，只有当它“感知”到数据变了，才会更新页面。如果你直接改数组里的内容，它可能没反应，所以得给它一个明确的“信号”：

假设你的组件里存着渲染表格的数据源，大概是这样的（模拟你说的JSON绑定数据）：

// 组件里的公共数据源，rows是所有行，每行的cells里存对应单元格的内容（包括wall）
public rows: any[] = [
  { rowId: 1, cells: [{ cellId: 'cell_1_1', wall: null }, { cellId: 'cell_1_2', wall: null }] },
  { rowId: 2, cells: [{ cellId: 'cell_2_1', wall: null }, { cellId: 'cell_2_2', wall: null }] }
];

当你点击按钮调用接口创建Wall后，别直接给row.cells[j].wall = newWall就完事，要这么做：

// 按钮点击时，传入当前行的索引i和单元格索引j
createWall(rowIndex: number, cellIndex: number) {
  // 调用后端接口拿新的Wall数据（这里是异步操作，必须在subscribe里处理结果）
  this.yourWallApiService.createNewWall().subscribe(newWallData => {
    // 1. 复制原数组，生成一个新的数组引用（关键！给Angular发信号）
    const updatedRows = [...this.rows];
    // 2. 找到对应行的对应单元格，把新Wall塞进去
    updatedRows[rowIndex].cells[cellIndex].wall = newWallData;
    // 3. 把新数组重新赋值给原变量，触发视图刷新
    this.rows = updatedRows;
  });
}

二、把新Wall精准放到「对应行的单元格」里 #

这一步要靠模板里的循环绑定来定位，假设你的模板是用表格渲染的，写法大概是这样：

<table class="your-table-style">
  <!-- 循环渲染每一行，用i记录当前行的索引 -->
  <tr *ngFor="let row of rows; let i = index">
    <!-- 循环渲染当前行的每个单元格，用j记录单元格索引 -->
    <td *ngFor="let cell of row.cells; let j = index">
      <!-- 如果这个单元格已经有Wall，就显示它的内容 -->
      <div *ngIf="cell.wall" class="wall-item">
        Wall ID: {{ cell.wall.id }} | 名称: {{ cell.wall.name }}
      </div>
      <!-- 点击这个按钮，就给当前行当前单元格创建Wall -->
      <button (click)="createWall(i, j)" class="create-btn">创建Wall</button>
    </td>
  </tr>
</table>

这样一来，你点哪一行哪一列的按钮，createWall函数就会拿到对应的rowIndex和cellIndex，精准把新Wall放到那个单元格里，同时因为我们更新了rows的数组引用，Angular会立刻刷新视图，显示新的Wall。

给你补两个新手必看的小提醒 #

1. 组件里的数据源一定要是公共属性（用public修饰，或者不写默认就是public），不然模板访问不到。
2. 如果你的JSON数据结构和我模拟的不一样（比如行和单元格的字段名不同），只需要把代码里的rowId、cells这些字段改成你实际的字段名就行，核心逻辑不变。

要是你有具体的代码片段或者JSON结构，随时调整细节，但按这个思路走，应该能解决你的两个问题~

内容的提问来源于stack exchange，提问作者Jaidev Khatri