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

对于console.log功能，Google Chrome会出现意外行为。当你做这样的事情时：

console.log(this.data);

如果data太大，Chrome会将其折叠，并且在语句执行时不会打印当前值：

只有当您点击“展开”按钮时，Chrome才能解析data变量的值。请注意，当您展开数据时，Chrome会在其旁边显示一个蓝色信息按钮，如果您将其悬停，则会看到一条消息"Value below was evaluated just now"，这意味着您正在查看变量的当前值，而不是值当你试图打印它时。

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

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

将您的数据转换为评估时的字符串，从而绕过Chrome的“刚才评估”机制：

另请注意，click事件发生在ngModel的设置者之前。执行函数clicked时，即使第一个语句也没有更改任何数据（所有checked = false）。但是当您点击展开图标时，ngModel的设置器已经有时间执行，因此您将看到当前值。

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值

3 个答案: