クラス 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

コンストラクタ

constructor

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

プロパティ

data

data: T

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

@備考:

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

@例:
 <igx-tree>
 ...
   <igx-tree-node [data]="data">
     {{ data.FirstName }} {{ data.LastName }}
   </igx-tree-node>
 ...
 </igx-tree>

expandedChange

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

loading: boolean = false

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

@備考:

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

parentNode

parentNode: IgxTreeNode<any>

selectedChange

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

tree: IgxTree

アクセサー

active

  • get active(): boolean
  • set active(value: boolean): void

children

disabled

  • get disabled(): boolean
  • set disabled(value: boolean): void

expanded

  • 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

level

  • get level(): number

path

resourceStrings

selected

  • 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

  • collapse(): void

expand

  • expand(): void

ngOnDestroy

  • ngOnDestroy(): void

toggle

  • toggle(): void