不更新与复选框关联的ngModel

Question

<label class="checkiconImg bg-white">
    <input type="checkbox"
           [(ngModel)]="quoteSupplierCover.isShowInComparisonTool"
            />
    <span class="geekmark ShowInComparisonToolCheckBox"
          pTooltip="Please deselect this before you select other."
          tooltipEvent="hover"
          (click)="checkRemark(coverIndex, roundIndex)"
          [tooltipDisabled]="!quoteSupplierCover.showWarningToolTip"></span>
</label>

此复选框选择是否在单独的比较工具中显示输入中给出的备注（此处未给出）。但在此之前，我们要检查是否有任何其他轮次已检查评论，我们希望用户取消选中该轮次并检查他们希望显示的当前轮次。但问题是！hasComparisonToolSet 为真，套件不会将 isShowInComparisonTool 更新为 true，检查复选框和 geemark 将为绿色。

checkRemark(quoteSupplierIndex, roundIndex) {
    if (this.negotiationRounds[roundIndex] && this.negotiationRounds[roundIndex][1].quoteCoverageAssessments[quoteSupplierIndex]) {
        try {
            this.negotiationRounds[roundIndex][1].quoteCoverageAssessments[quoteSupplierIndex].isShowInComparisonTool = false;
        } finally {
            // Check other rounds for any that have the comparison tool set
            const hasComparisonToolSet = this.negotiationRounds
                .filter((_, idx) => idx !== roundIndex)
                .some(round => {
                    const isShowInComparisonTool = round[1].quoteCoverageAssessments[quoteSupplierIndex]?.isShowInComparisonTool === true;
                    if (isShowInComparisonTool) {
                        round[1].quoteCoverageAssessments[quoteSupplierIndex].showWarningToolTip = true;
                    }
                    return isShowInComparisonTool;
                });
            if (!hasComparisonToolSet) {
                // Reset values if no other round has it set
                console.log("No other rounds with comparison tool set, resetting values.");
                const assessment = this.negotiationRounds[roundIndex][1].quoteCoverageAssessments[quoteSupplierIndex];
                assessment.isShowInComparisonTool = true;
                assessment.showWarningToolTip = false;

                if (assessment.remarks !== null && assessment.isShowInComparisonTool === true && assessment.remarksType === 0) {
                    this.showRemark = true;
                }
            } 
        }       
    }        
}

我什至尝试在复选框本身中添加

(ngModelChange)="checkRemark(coverIndex, roundIndex)"

，就像这样

<label class="checkiconImg bg-white">
    <input type="checkbox"
           [(ngModel)]="quoteSupplierCover.isShowInComparisonTool"
           (ngModelChange)="checkRemark(coverIndex, roundIndex)" />
    <span class="geekmark ShowInComparisonToolCheckBox"
           pTooltip="Please deselect this before you select other."
           tooltipEvent="hover"
           [tooltipDisabled]="!quoteSupplierCover.showWarningToolTip"></span>
</label>

但在这里，即使模型已更新，该复选框也始终处于选中状态，即使该特定的

quoteSupplierCover.isShowInComparisonTool

为 false。

Answer 1

我从你的问题中了解到的是，模板在某种程度上没有检测到更改，或者你可能没有更改正确的索引。

你可以尝试这些：

• 检查您是否更改了数组的正确索引 如果是的话：

• 尝试重新分配相同的变量，这通常会触发如下所示的更改检测机制：

  this.negotiationRounds[roundIndex][1].quoteCoverageAssessments[quoteSupplierIndex] = {...assesment}

  或者您可以通过导入changeDetectorRef并触发detectChanges方法来手动触发变更检测机制：

  this.changeDetectorRef.detectChanges();