クラス IgxTreeNodeComponent<T>

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

 <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>
  • T

階層

  • ToggleAnimationPlayer
    • IgxTreeNodeComponent

実装

Index

コンストラクタ

  • new IgxTreeNodeComponent<T>(tree: IgxTree, selectionService: IgxTreeSelectionService, treeService: IgxTreeService, navService: IgxTreeNavigationService, cdr: ChangeDetectorRef, animationService: AnimationService, element: ElementRef<HTMLElement>, parentNode: IgxTreeNode<any>): IgxTreeNodeComponent<T>

プロパティ

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

アクセサー

  • get active(): boolean
  • set active(value: boolean): void
  • get disabled(): boolean
  • set disabled(value: boolean): void
  • get expanded(): boolean
  • set expanded(val: boolean): void
  • ノードが展開されているかどうかを取得または設定します。

    <igx-tree>
    ...
    <igx-tree-node *ngFor="let node of data" [expanded]="node.name === this.expandedNode">
    {{ node.label }}
    </igx-tree-node>
    </igx-tree>
    const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
    const expanded = node.expanded;
    node.expanded = true;

    返却 boolean

  • ノードが展開されているかどうかを取得または設定します。

    <igx-tree>
    ...
    <igx-tree-node *ngFor="let node of data" [expanded]="node.name === this.expandedNode">
    {{ node.label }}
    </igx-tree-node>
    </igx-tree>
    const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
    const expanded = node.expanded;
    node.expanded = true;

    パラメーター

    • val: boolean

    返却 void

  • get level(): number
  • get selected(): boolean
  • set selected(val: boolean): void
  • ノードが選択されているかどうかを取得または設定します。双方向バインディングをサポートします。

    <igx-tree>
    ...
    <igx-tree-node *ngFor="let node of data" [(selected)]="node.selected">
    {{ node.label }}
    </igx-tree-node>
    </igx-tree>
    const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
    const selected = node.selected;
    node.selected = true;

    返却 boolean

  • ノードが選択されているかどうかを取得または設定します。双方向バインディングをサポートします。

    <igx-tree>
    ...
    <igx-tree-node *ngFor="let node of data" [(selected)]="node.selected">
    {{ node.label }}
    </igx-tree-node>
    </igx-tree>
    const node: IgxTreeNode<any> = this.tree.findNodes(data[0])[0];
    const selected = node.selected;
    node.selected = true;

    パラメーター

    • val: boolean

    返却 void

メソッド

  • collapse(): void
  • expand(): void
  • ngOnDestroy(): void
  • toggle(): void