Chrome 的 console.log 打印出不正确的 var 值

Question

我在 Angular 应用程序中有两种布尔值绑定方式。在我的组件中，我声明变量如下

data = [
    {name:'xyz', value:'0', checked:false},
    {name:'abc', value:'1', checked:false},
    {name:'def', value:'2', checked:false}
];

在我的 HTML 文件中，我有以下代码：

    <li *ngFor="let option of data">
        <label>
            <input type="checkbox"
                   (click)="clicked($event)"
                   name="options"
                   value="{{option.value}}"
                   [(ngModel)]="option.checked" />
                {{option.name}}
        </label>
    </li>

clicked函数如下：

    clicked(event:any) {
        console.log(this.data);
        for(var i=0; i<this.data.length; i++) {
            console.log(this.data[i]);
        }
    }

我遇到了一个奇怪的行为，因为 console.log(this.data) 打印的内容与我为每个选项所做的 console.log 不同：

谁能告诉我出了什么问题。

Answer 1

Google Chrome 在涉及 console.log 函数时出现意外行为。当你做这样的事情时：

console.log(this.data);

如果data太大，Chrome会折叠它，并且不会在语句执行的那一刻打印当前值：

Chrome 将仅在您单击 "expand" 按钮时解析 data 变量的值。请注意，当您展开数据时，Chrome 会在其旁边放置一个蓝色信息按钮，如果将其悬停，您将看到一条消息 "Value below was evaluated just now"，这意味着您正在查看变量的当前值，不是您尝试打印时的值。

如果您想在尝试打印时实际查看变量的值，则需要执行以下操作：

console.log(JSON.stringify(this.data));

它将您的数据转换为评估时的字符串，从而绕过 Chrome 的 "evaluated just now" 机制：

另外，请注意 click 事件发生在 ngModel 的 setter 之前。当执行函数 clicked 时，即使是第一条语句，您的数据 none 也已更改（所有 checked = false）。但是当您单击展开图标时，ngModel 的 setter 已经有时间执行，所以您会看到当前值。

Answer 2

这是我写的一些东西，有助于在尝试使用 console.log 进行调试时保持理智

就这样

import {betterConsole} from <path to betterConsole>
let console = betterConsole;

...现在只需像平常一样使用 console.log，但将调用包装器。如果您想获得 console.log 的旧的、违反直觉的行为，只需使用 console.lie（公平警告，我还没有实际测试 console.lie）。

Answer 3

affichage de deux attributs d'un tableau d'objet

Etat = [
        {  id: 1, name: 'Pression pneus', checked: false },
        {  id: 2, name: 'Direction', checked: false },
        {  id: 3, name: 'Eclairage', checked: false },
        {  id: 4, name: 'Kit anti-crevaison', checked: false }
    ];     

get  resultEtat() {
           return this.Etat.filter(item => item.checked).map(({id, name}) => { return {id, name}})
        };

Chrome 的 console.log 打印出不正确的 var 值

Chrome's console.log prints incorrect var value

google-chrome

console.log

angular