angular - 在表格的一行内单击按钮更改属性 [禁用] 值 - Angular 6

Question

我有一个具有以下属性的表

<table class="table table-bordered" id="usersdisplaytable">
    <tbody>
        <tr>
            <th>Object Name</th>
            <th>Read</th>
            <th>Write</th>
            <th>Update</th>
            <th>Delete</th>
            <th>Action</th>
        </tr>
        <tr *ngFor="let items of accessLists; let i = index" [attr.id]="i">
            <td>
                {{items.Object_Name}}
            </td>
            <td>
                <input type="checkbox" [disabled]="disableread">
            </td>
            <td>
                <input type="checkbox" [disabled]="disablewrite">
            </td>
            <td>
                <input type="checkbox" [disabled]="disableupdate">
            </td>
            <td>
                <input type="checkbox" [disabled]="disabledelete">
            </td>
            <td>
                <button type="button" class="btn btn-primary btn-sm" (click)="UpdateAccess(items,$event)">
                    {{buttonName}}
                </button>
            </td>
        </tr>
    </tbody>
</table>

我想在单击按钮时启用和禁用特定行的复选框。

Answer 1

通过在整个表上为 disableread 使用相同的变量，尤其是对于 *ngFor。您最终将禁用/启用所有复选框。

此处最快的解决方法是创建一个与数据长度相同的禁用数组。

class Component {
    disableread: boolean[] = [];
    data = ["hello","hi","aloha","sayonara"]
    constructor() {
        // lets assume disableread is initially false
        for(let i = 0; i < this.data.length; i++) {
            this.disableread[i] = false;
        }
    }

    UpdateUIToggle(index) {
        this.disableread[index] =  !this.disableread[index]
    }

}

然后在你的 html 上

<tbody>
  <tr *ngFor="let d of data; let i = index"> 
    <td>{{d}}</td>
    <td><input type="checkbox" [disabled]="disableread[i]"></td>
    <td>
     <button (click)="UpdateUIToggle(i)">Toggle</button>
    </td>

  </tr>
</tbody>