Javascript 如何在复选框选择中仅启用特定卡按钮

我正在运行Angular 9，我只想在单击复选框时启用按钮。我使用的是引导卡，每张卡都有自己的复选框和按钮。我面临的问题是，每当我点击任何卡片复选框时，卡片上的每个按钮都会被启用，反之亦然。我只希望特定的卡按钮被启用或禁用

test.component.html

<div class="col-3" *ngFor="let data of nominationData">
                    <form [formGroup]="nominationForm" (ngSubmit)="acceptNomination($event, data)">
                        <div class="card">
                            <div class="card-header">
                                <div class="title">{{data.contributor.name}}</div>
                            </div>
                            <div class="card-body">
                                <div class="row" style="height: 190px;">
                                    <div class="col-sm-12">
                                        <span class="nomination-title">Project Name: </span><div class="desc">{{data.projectName}}</div>
                                        <span class="nomination-title">Posted Date: </span><div class="desc">{{data.nominatedDateTime | date}}</div>
                                        <span class="nomination-title">Technology: </span>
                                        <div *ngFor="let data of data.technology; let i=index" class="tech">
                                            <input type="checkbox" style="margin-right: 10px;" [value]="data"
                                                (change)="onCheckboxChange($event)" />
                                            <label for="chk" style="font-size: 15px;">{{data}}</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="buttons">
                                            <button class="btn btn-success" type="submit" [disabled]="!techStack.length">Accept</button>
                                            <button class="btn btn-danger" (click)="rejectNomination(data)">Reject</button>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </form>
                </div>

---

代码中的问题是在

namitondata

中有一个

数据数组。但是
techStack
变量对于数组的所有元素都是通用的。您还应该有一个
techStack
元素数组

// Initialize techStack to be an array of arrays
techStack: string[][] = [];

//在html中，将此索引传递给onCheckBoxChange函数
.....
....
....
接受
..... 

// Initialize techStack to be an array of arrays
techStack: string[][] = [];

// In the getNominations function, once you receive the nomination data, insert empty arrays in techStack.
nominationData.forEach(_ => techStack.push([]))

// Modify the onCheckBoxChange function to take an index to indicate checkbox in which item in the list was clicked.
onCheckboxChange(e, index) {
 ...
 this.techStack[index] = Technology.value;
 ... 
}

// In the html, pass this index to the onCheckBoxChange function

<div class="col-3" *ngFor="let data of nominationData; let index=index">
 .....
 <input
    type="checkbox"
    style="margin-right: 10px;"
    [value]="data"
    (change)="onCheckboxChange($event, index)"
 />
 ....
 ....
 <button
    class="btn btn-success"
    type="submit"
    [disabled]="!techStack[index].length"
 >
  Accept
 </button>
 ..... 
</div>