使用生成的复选框将信息从 HTML 传递到 TS？

Question

我的 Angular 项目有问题。基本上，我有一个包含一些数据的 15 行的 mat-table。我在行的末尾添加了复选框，以便当单击复选框，然后按下按钮时，它通过调用 API 来操作数据（一旦我弄清楚如何将适当的数据传递给它，我将调用 API）

Looks like this

表格数据是这样生成的：

HTML

<mat-table [dataSource]="dataSource$">
     <ng-container matColumnDef="process">
        <mat-header-cell #checkBox *matHeaderCellDef> Process </mat-header-cell>
        <mat-cell *matCellDef="let execution"> {{execution.process}} </mat-cell>
     </ng-container>
<ng-container matColumnDef="reprocess">
      <mat-header-cell *matHeaderCellDef>  
         <button tslbutton class="tslbutton" (click)="reprocessHomeProcesses(checkBox)" id="reprocessButton">
            Reprocess
         </button> 
      </mat-header-cell>
      <mat-cell id="reprocessCell" *matCellDef="let execution">
         <mat-checkbox class="checker" #checkBox></mat-checkbox>
      </mat-cell>
   </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
     <mat-row #checkBox *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

TS

dataSource$ = new MatTableDataSource();

//on page load dataSource$ is populated with 15 objects. These are different each time

reprocessHomeProcesses(checkboxes) {
    console.log(checkboxes))
  }

我无法访问存储在“执行”中的数据。在 HTML 中，我可以通过以下方式查看它：

<span>{{execution.process}}</span>

这会返回执行对象的进程字段。

但我无法将此数据传递给 TS。我尝试使用 #checkBox 并将其作为参数传递给 reprocessHomeProcesses() 但这会返回未定义。有没有更简单的解决方法

1. 确定哪些复选框已被选中
2. 根据选中的复选框将数据从执行传递到 TS？

我需要的所有信息都在执行变量中。基本上，当检查框并按下按钮时，我需要将执行数据发送回键入键。但是，当我尝试将执行作为参数传递给我的 reprocessHomeProcesses() 时，它返回为未定义，即使执行具有创建行的数据。为什么会这样？

是否不能使用复选框将执行从 HTML 发送到 TS？我好几个小时都没有运气。

感谢任何帮助。

Answer 1

在 Angular （React 和 VueJs） 中，您不能使用 document.querySelector(...) （或类似的）直接查询 DOM。

这些框架是以数据为中心的，您需要在 Controller 中定义一个公共变量来保存数据，该变量将由 Angular 的 2-way data binding 更新：

在模板中(HTML)：

<mat-table [dataSource]="dataSource$">
     <ng-container matColumnDef="process">
        <mat-header-cell #checkBox *matHeaderCellDef> Process </mat-header-cell>
        <mat-cell *matCellDef="let execution"> {{execution.process}} </mat-cell>
     </ng-container>
<ng-container matColumnDef="reprocess">
      <mat-header-cell *matHeaderCellDef>  
         <button tslbutton class="tslbutton" (click)="reprocessHomeProcesses()" id="reprocessButton">
            Reprocess
         </button> 
      </mat-header-cell>
      <mat-cell id="reprocessCell" *matCellDef="let execution; let i = index">
         <mat-checkbox class="checker" [(ngModel)]="auxiliarDataSource[i].checked"></mat-checkbox>
      </mat-cell>
   </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
     <mat-row #checkBox *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

从“reprocessHomeProcesses”中删除参数，并将[(ngModel)]="execution.checked"放在“mat-checkbox”上

在控制器 (TS) 中，类似：

export class MyController {
  dataSource: [
    { process: 1 },
    { process: 2 },
  ];
  auxiliarDataSource: [
    { checked: false, index: 0 },
    { checked: false, index: 1 },
  ];

  void reprocessHomeProcesses() {
    let filteredIndex = this.auxiliarDataSource.filter(x => x.checked).map( x => x.index );
    let filteredItens = this.dataSource.filter( (x,i)=> filteredIndex.indexOf(i) )
    console.log( filteredItens );
  }

  // ... more code ahead
}

代码未测试