Class IgxTreeNodeComponent<T>

ツリー ノード コンポーネントは、ツリー コンポーネントの子ノードまたは別のツリー ノードを表します。 使用方法:

 <igx-tree>
...
<igx-tree-node [data]="data" [selected]="service.isNodeSelected(data.Key)" [expanded]="service.isNodeExpanded(data.Key)">
{{ data.FirstName }} {{ data.LastName }}
</igx-tree-node>
...
</igx-tree>

Type Parameters

  • T

階層

Hierarchy

  • ToggleAnimationPlayer
    • IgxTreeNodeComponent

実装

コンストラクター

プロパティ

data: T

ノードが可視化しているデータ エントリ。

ノードの検索に必要です。

 <igx-tree>
...
<igx-tree-node [data]="data">
{{ data.FirstName }} {{ data.LastName }}
</igx-tree-node>
...
</igx-tree>
expandedChange: EventEmitter<boolean> = ...

ノードの expanded プロパティが変更されたときに発生されます。

<igx-tree>
<igx-tree-node *ngFor="let node of data" [data]="node" [(expanded)]="node.expanded">
</igx-tree-node>
</igx-tree>
const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
node.expandedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node expansion state changed to ", e))
loading: boolean = false

ノードがデータを読み込んでいるかどうかを指定するためにロードオンデマンド シナリオで使用されます。

ノードを読み込んでも子は描画されません。

parentNode: IgxTreeNode<any>
selectedChange: EventEmitter<boolean> = ...

ノードの selected プロパティが変更されたときに発生されます。

<igx-tree>
<igx-tree-node *ngFor="let node of data" [data]="node" [(selected)]="node.selected">
</igx-tree-node>
</igx-tree>
const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
node.selectedChange.pipe(takeUntil(this.destroy$)).subscribe((e: boolean) => console.log("Node selection changed to ", e))
tree: IgxTree

アクセサー

メソッド

  • ノードの展開状態を切り替え、アニメーションをトリガーします。

    <igx-tree>
    <igx-tree-node #node>My Node</igx-tree-node>
    </igx-tree>
    <button type="button" igxButton (click)="node.toggle()">Toggle Node</button>
    const myNode: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
    myNode.toggle();

    返却 void