javascript - Angular 2 DOM 绑定(bind)数据不准确

Question

我正在尝试比较两个因 API 调用而不断变化的变量。

想想股票柜台。如果库存增加，我也想知道它是否减少。

在 API 调用之前，我存储调用的实例(对象数组)，然后将其与调用的新版本进行比较。这一切都有效，因此我可以让控制台告诉我是否有增加或减少。

我将此信息存储在数组中，根据结果将 bool 值更改为 true 或 false。

完美，一切都很好并且工作正常。然而，当我使用 *ngFor 循环将这些精确值绑定(bind)到 DOM 时，因为我想循环遍历所有对象，它们的值始终为 false(默认值)。即使 console.log 说它们确实改变了，它们也从未真正改变过。

为什么 DOM 不能正确绑定(bind)值？

DOM

<div class="ticker" *ngFor="let coinresult of coinResults; let beforecoinresult of beforeCoinResults; let aftercoinresult of afterCoinResults;">
    <div class="wrapper" *ngIf="coinresult.name != step2Selection">
        <!--<h1 *ngIf="match === false">Before: {{beforecoinresult.amount}} - After: {{aftercoinresult.amount}}</h1>-->
        <div class="pin" (click)="pinTitle(coinresult.amount, coinresult.name)">
            <i class="material-icons" *ngIf="pinnedCoinAmount != coinresult.amount">gps_not_fixed</i>
            <i class="material-icons selectedCoin" *ngIf="pinnedCoinAmount === coinresult.amount">gps_fixed</i>
        </div>

        <div class="amount" [ngClass]="{amountpinned: pinnedCoinAmount === coinresult.amount, 
                                        amountincrease: beforecoinresult.increase,
                                        amountdecrease: beforecoinresult.decrease}">
                                        {{coinresult.amount}}
        </div>
        <div class="name" [ngClass]="{  namepinned: pinnedCoinAmount === coinresult.amount, 
                                        nameincrease: beforecoinresult.increase,
                                        namedecrease: beforecoinresult.decrease}">
                                        {{coinresult.name}} 

        </div>
        {{beforecoinresult.increase}} {{beforecoinresult.decrease}}
    </div>

界面

export interface coinResultsType{
   name: string,
   amount: number,
   increase: boolean,
   decrease: boolean
}

我的组件中有大量逻辑，但我认为发布它没有值(value)，它可以工作并且工作得很好。所以我附上了正在记录的控制台的图像:

console.log(beforeCoinResults[0].increase);
console.log(beforeCoinResults[0].decrease);

但是在 CAD 代码中您可以看到两者都是错误的。现在，他们的信息发生得很快，所以你可能会说它已经变成了假的，但请放心，我正在观看，但它们仍然是假的。

Answer 1

不要使用 console.log 来调试代码，而是使用 debugger 来停止代码执行并手动检查值。原因是 console.log 可能与代码执行不同步，并且当数据显示在控制台上时，它可能已经发生更改。我知道，这听起来很令人困惑，特别是从同步的 Angular 而不是异步的 Angular 考虑 console.log。

您的代码可能工作正常，但 console.log 可能无法正确显示值。