Question

我在 Angular2 中创建了一个递归树，通过一些引用，我在我的模板中有toggle属性，我没有在使用过的模型中声明任何切换属性或方法，但仍然在工作，有人可以解释它是如何运作的。

<li *ngFor="let childNode of taxonomyChildList"><input 
*ngIf="childNode.hasMoreChildren"
        type="checkbox" data-md-icheck
        (click)="childNode.toggle=!childNode.toggle" />
                <a
            *ngIf="!childNode.hasMoreChildren" (click)="records()">
{{childNode.dname
                }}</a> <label *ngIf="childNode.hasMoreChildren">
{{childNode.dname}}</label>
        <app-childnodes *ngIf="childNode.toggle"
            [startingNode]="childNode.traversalPath"></app-childnodes>
</li>

我想知道它是如何运作的

(click)="childNode.toggle=!childNode.toggle"

这里的toggle没有定义对象或方法的属性，所以它是如何工作的。

Answer 1

JavaScript是一种动态语言。由于您尚未定义任何toggle属性，因此childNode.toggle最初未定义，未定义为假。

做

childNode.toggle=!childNode.toggle

第一次添加toggle属性，等于!undefined，由于undefined是假的，toggle现在为真。再次单击会使其变为false。

请注意，在使用AOT编译器构建应用程序时，您将收到编译错误，因为模板将被编译为TypeScript，然后编译为JavaScript，然后TypeScript会抱怨您的应用程序没有toggle属性节点（除非它们的类型是any）。所以你应该定义声明这个toggle属性。

另请注意，当前版本的Angular是5.x.你不应该再使用Angular 2了。

Answer 2

首次执行时，childNode.toggle未定义，undefined是JavaScript认为的 falsy 值。

否定 falsy 值的评估结果为true。

＆＃13;

const childNode = {};

console.log(childNode.toggle); // undefined

childNode.toggle = !childNode.toggle;

console.log(childNode.toggle); // true

childNode.toggle = !childNode.toggle;

console.log(childNode.toggle); // false

＆＃13;

如何在angular2中内部工作

2 个答案: