如何在angular2內部進行切換

Question

我已經通過一些參考在Angular2中創建了一個遞歸樹，我的模板中有toggle屬性，並且在使用的模型中沒有聲明任何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" 

這里的切換未定義對象或方法的屬性，因此它如何工作。

Answer 1

JavaScript是一種動態語言。 由於尚未定義任何toggle屬性，因此childNode.toggle最初是未定義的，而undefined是虛假的。

干

childNode.toggle=!childNode.toggle

第一次添加一個toggle屬性，它等於!undefined ，並且由於undefined是虛假的，因此toggle現在為true。 再次單擊將使其變為假。

需要注意的是建立與AOT編譯您的應用程序時，你會得到一個編譯錯誤，因為模板將被編譯為打字稿，然后為JavaScript，然后打字稿會抱怨沒有toggle你的節點上屬性（除非它們的類型是any ）。 因此，您應該明確聲明此toggle屬性。

還要注意，Angular的當前版本是5.x。 您不應該再使用Angular 2。

Answer 2

第一次執行時， childNode.toggle是未定義的， undefined是JavaScript認為是虛假的值。

否定虛假值將得出 true 。

 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