【问题标题】：Angular 2 DOM Binding Data is not accurateAngular 2 DOM 绑定数据不准确
【发布时间】：2017-04-03 15:04:32
【问题描述】：

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

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

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

我将此信息存储在数组中，根据结果将布尔值更改为真或假。

完美，一切正常。但是，当我使用 *ngFor 循环将这些精确值绑定到 DOM 时，因为我想循环遍历所有对象，它们的值始终为 false（默认值）。即使那些 console.log 说他们是，他们也从来没有真正改变过。

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

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
}

我的组件中有大量逻辑，但我认为发布它没有任何价值，它很有效，而且效果很好。所以我附上了正在记录的控制台的图像：

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

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

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

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

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

【讨论】：