如何从另一个ng-template中获取input组件的值？

直接通过ID跨ng-template获取输入框值的方式不可行，原因有两点：一是ngx-datatable会为每行渲染模板实例，重复的ID违反HTML规范；二是不同ng-template属于独立的模板上下文，无法直接跨模板访问DOM元素。正确的做法是通过数据绑定同步行数据，具体实现如下：

方法1：使用双向绑定（需导入FormsModule） #

将输入框的值与当前行的数据源属性双向绑定，输入框内容会实时同步到行对象中，另一个模板直接读取行对象的属性即可。

修改后的代码：

<!-- temp1：绑定行数据的属性 -->
<ng-template #temp1 ngx-datatable-cell-template let-row="row">
  <input type="text" [(ngModel)]="row.name" />
</ng-template>

<!-- temp2：直接读取行对象的同步后属性 -->
<ng-template #temp2 ngx-datatable-cell-template let-row="row">
  {{row.name}}
</ng-template>

注意：需要在对应模块中导入FormsModule才能使用[(ngModel)]。

方法2：使用单向绑定+输入事件（无需FormsModule） #

如果不想引入表单模块，可以通过监听输入事件手动更新行数据的属性：

<!-- temp1：监听输入事件更新行属性 -->
<ng-template #temp1 ngx-datatable-cell-template let-row="row">
  <input 
    type="text" 
    [value]="row.name" 
    (input)="row.name = $event.target.value" 
  />
</ng-template>

<!-- temp2：读取行对象的属性 -->
<ng-template #temp2 ngx-datatable-cell-template let-row="row">
  {{row.name}}
</ng-template>

核心思路 #

Angular遵循数据驱动视图的设计理念，跨模板共享数据应该通过数据源（这里的row对象）传递，而非直接操作DOM元素。这种方式既符合规范，也能避免重复ID、上下文隔离等DOM操作带来的问题。

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