如果它的 id 存在于数组中，则选中一个复选框

Question

我正在 Angular 8.

中创建一个应用程序

我的应用程序使用对话框显示包含产品数据的 table，table 显示两列 [id, description]，如您所见，id 列生成一个复选框并打印每个产品的 ID。

这是生成每个复选框并在 table 中打印 ID 的代码：

<ng-container matColumnDef="Id">
    <th mat-header-cell *matHeaderCellDef>Id</th>
    <td mat-cell *matCellDef="let element">
    //I assign an id to each checkbox which is the one of the element to show (A, B, C... etc)
    // and bind the method change to 'checkboxChanged', this event lets me to push the id of the checkbox to an array
        <mat-checkbox (change)="checkboxChanged($event)" id={{element.id}}>
            {{element.id}}
        </mat-checkbox>
    </td>
</ng-container>
<ng-container matColumnDef="Description">
    <th mat-header-cell *matHeaderCellDef>Description</th>
    <td mat-cell *matCellDef="let element">{{element.description}}</td>
</ng-container>

当用户点击每个复选框时，一个名为 'checkboxChanged' 的函数被触发到 add/remove 数组中的 id（取决于复选框的状态）。

这是将复选框添加到数组的逻辑代码：

public tempData = [];

checkboxChanged(event) {
    const id = event.source.id; //Get the id of the checkbox
    console.log(event.checked); //true or false
    console.log(id); //A, B, C... etc
    if (event.checked) this.tempData.push(id); //If checked, add to array
    else { //if unchecked, remove from the array
        const i = this.tempData.indexOf(id);
        this.tempData.splice(i, 1);
    }
console.log("tempData", this.tempData); // prinst [B, C] from the example of the screenshot 
}

用户点击所有想要的产品复选框后，点击'add'将数组发送到主屏幕，然后进行处理。例如，如果用户点击 B 和 C 作为屏幕截图，则数组为 [B, C]。

问题在于此对话框使用 Angular Material 分页，因此每次用户更改页面时，所有复选框都默认未选中，因此，如果我单击 A 和 B，则转到第二页，然后 return 到第一页，A 和 B 复选框将被取消选中，但数组仍然是 [A, B]。

我想象的是在生成每个复选框时设置一个条件，这样即使我移动到另一个页面也没有关系。这个条件应该是 'if the Id already exist in tempData then check the ckeckbox'，类似于：

<mat-checkbox (change)="checkboxChanged($event)" id={{element.id}} checked = "{{this.tempData}}.includes({{element.id}})">
    {{element.id}}
</mat-checkbox>

所以这里的重点是发现如何应用这个条件，可能是通过 *ngIf 或通过复选框的 'checked' 属性。

有人能帮帮我吗？:(

Answer 1

试试这个解决方案

<mat-checkbox (change)="checkboxChanged($event)" id={{element.id}} [checked] = "toggleCheckBox(element.id)"> {{element.id}} </mat-checkbox>

在你的 .ts 中创建这个函数

toggleCheckBox(elementId){ return (this.tempData.indexOf(elementId) != -1) ? true : false; }

如果您的变量 tempData 是一个 id 数组，它一定可以工作

如果它的 id 存在于数组中，则选中一个复选框

Make a checkbox checked if its id is present in an array

javascript

checkbox

pagination

angular

angular8