web-dev-qa-db-ja.com

Angularマテリアルマットツリーチェックボックスの値を取得

チェックボックス付きのAngular Material v6.0 MatTreeModule（mat-tree）を使用しています。しかし、どのノードがチェックされ、どのノードがチェックされていないかを判別する方法を理解するのに苦労しています。 Angular Materialの例では、セットアップに非常に優れたソースコードが提供されています。

ただし、チェックされているチェックボックスとチェックされていないチェックボックスを特定できません。私は何時間もこれを運なしで理解しようと試みました。

私の目標は、エンドユーザーがツリーのチェックボックスをオンまたはオフにすることであり、エンドユーザーが選択を行った後、そこからいくつかのプロセスを実行する必要があります。

しかし、チェックされているマットツリーとチェックされていないマットツリーノードを突き止めようとすれば、私は完全に行き詰まり、どこでも見つけることができる実用的な例はありません。

重要なソースコードが見つかりました ここ

Mat-treeに関する詳細情報が見つかりました here

チェックボックスがチェックされているかどうかを判断する方法を誰かが手伝ってくれる？

ありがとう。

リクエストごとに、2つのコードファイルからコードをここに追加します。

app/tree-checklist-example.ts app/tree-checklist-example.html

「app/tree-checklist-example.ts」からのTypeScriptソースコード

import {SelectionModel} from '@angular/cdk/collections';
import {FlatTreeControl} from '@angular/cdk/tree';
import {Component, Injectable} from '@angular/core';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
import {BehaviorSubject} from 'rxjs';

/**
 * Node for to-do item
 */
export class TodoItemNode {
  children: TodoItemNode[];
  item: string;
}

/** Flat to-do item node with expandable and level information */
export class TodoItemFlatNode {
  item: string;
  level: number;
  expandable: boolean;
}

/**
 * The Json object for to-do list data.
 */
const TREE_DATA = {
  Groceries: {
    'Almond Meal flour': null,
    'Organic eggs': null,
    'Protein Powder': null,
    Fruits: {
      Apple: null,
      Berries: ['Blueberry', 'Raspberry'],
      Orange: null
    }
  },
  Reminders: [
    'Cook dinner',
    'Read the Material Design spec',
    'Upgrade Application to Angular'
  ]
};

/**
 * Checklist database, it can build a tree structured Json object.
 * Each node in Json object represents a to-do item or a category.
 * If a node is a category, it has children items and new items can be added under the category.
 */
@Injectable()
export class ChecklistDatabase {
  dataChange = new BehaviorSubject<TodoItemNode[]>([]);

  get data(): TodoItemNode[] { return this.dataChange.value; }

  constructor() {
    this.initialize();
  }

  initialize() {
    // Build the tree nodes from Json object. The result is a list of `TodoItemNode` with nested
    //     file node as children.
    const data = this.buildFileTree(TREE_DATA, 0);

    // Notify the change.
    this.dataChange.next(data);
  }

  /**
   * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
   * The return value is the list of `TodoItemNode`.
   */
  buildFileTree(obj: object, level: number): TodoItemNode[] {
    return Object.keys(obj).reduce<TodoItemNode[]>((accumulator, key) => {
      const value = obj[key];
      const node = new TodoItemNode();
      node.item = key;

      if (value != null) {
        if (typeof value === 'object') {
          node.children = this.buildFileTree(value, level + 1);
        } else {
          node.item = value;
        }
      }

      return accumulator.concat(node);
    }, []);
  }

  /** Add an item to to-do list */
  insertItem(parent: TodoItemNode, name: string) {
    if (parent.children) {
      parent.children.Push({item: name} as TodoItemNode);
      this.dataChange.next(this.data);
    }
  }

  updateItem(node: TodoItemNode, name: string) {
    node.item = name;
    this.dataChange.next(this.data);
  }
}

/**
 * @title Tree with checkboxes
 */
@Component({
  selector: 'tree-checklist-example',
  templateUrl: 'tree-checklist-example.html',
  styleUrls: ['tree-checklist-example.css'],
  providers: [ChecklistDatabase]
})
export class TreeChecklistExample {
  /** Map from flat node to nested node. This helps us finding the nested node to be modified */
  flatNodeMap = new Map<TodoItemFlatNode, TodoItemNode>();

  /** Map from nested node to flattened node. This helps us to keep the same object for selection */
  nestedNodeMap = new Map<TodoItemNode, TodoItemFlatNode>();

  /** A selected parent node to be inserted */
  selectedParent: TodoItemFlatNode | null = null;

  /** The new item's name */
  newItemName = '';

  treeControl: FlatTreeControl<TodoItemFlatNode>;

  treeFlattener: MatTreeFlattener<TodoItemNode, TodoItemFlatNode>;

  dataSource: MatTreeFlatDataSource<TodoItemNode, TodoItemFlatNode>;

  /** The selection for checklist */
  checklistSelection = new SelectionModel<TodoItemFlatNode>(true /* multiple */);

  constructor(private database: ChecklistDatabase) {
    this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel,
      this.isExpandable, this.getChildren);
    this.treeControl = new FlatTreeControl<TodoItemFlatNode>(this.getLevel, this.isExpandable);
    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

    database.dataChange.subscribe(data => {
      this.dataSource.data = data;
    });
  }

  getLevel = (node: TodoItemFlatNode) => node.level;

  isExpandable = (node: TodoItemFlatNode) => node.expandable;

  getChildren = (node: TodoItemNode): TodoItemNode[] => node.children;

  hasChild = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.expandable;

  hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.item === '';

  /**
   * Transformer to convert nested node to flat node. Record the nodes in maps for later use.
   */
  transformer = (node: TodoItemNode, level: number) => {
    const existingNode = this.nestedNodeMap.get(node);
    const flatNode = existingNode && existingNode.item === node.item
        ? existingNode
        : new TodoItemFlatNode();
    flatNode.item = node.item;
    flatNode.level = level;
    flatNode.expandable = !!node.children;
    this.flatNodeMap.set(flatNode, node);
    this.nestedNodeMap.set(node, flatNode);
    return flatNode;
  }

  /** Whether all the descendants of the node are selected */
  descendantsAllSelected(node: TodoItemFlatNode): boolean {
    const descendants = this.treeControl.getDescendants(node);
    return descendants.every(child => this.checklistSelection.isSelected(child));
  }

  /** Whether part of the descendants are selected */
  descendantsPartiallySelected(node: TodoItemFlatNode): boolean {
    const descendants = this.treeControl.getDescendants(node);
    const result = descendants.some(child => this.checklistSelection.isSelected(child));
    return result && !this.descendantsAllSelected(node);
  }

  /** Toggle the to-do item selection. Select/deselect all the descendants node */
  todoItemSelectionToggle(node: TodoItemFlatNode): void {
    this.checklistSelection.toggle(node);
    const descendants = this.treeControl.getDescendants(node);
    this.checklistSelection.isSelected(node)
      ? this.checklistSelection.select(...descendants)
      : this.checklistSelection.deselect(...descendants);
  }

  /** Select the category so we can insert the new item. */
  addNewItem(node: TodoItemFlatNode) {
    const parentNode = this.flatNodeMap.get(node);
    this.database.insertItem(parentNode!, '');
    this.treeControl.expand(node);
  }

  /** Save the node to database */
  saveNode(node: TodoItemFlatNode, itemValue: string) {
    const nestedNode = this.flatNodeMap.get(node);
    this.database.updateItem(nestedNode!, itemValue);
  }
}



HTML source code from "app/tree-checklist-example.html":

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
    <button mat-icon-button disabled></button>
    <mat-checkbox class="checklist-leaf-node"
                  [checked]="checklistSelection.isSelected(node)"
                  (change)="checklistSelection.toggle(node);">{{node.item}}</mat-checkbox>
  </mat-tree-node>

  <mat-tree-node *matTreeNodeDef="let node; when: hasNoContent" matTreeNodePadding>
    <button mat-icon-button disabled></button>
    <mat-form-field>
      <input matInput #itemValue placeholder="New item...">
    </mat-form-field>
    <button mat-button (click)="saveNode(node, itemValue.value)">Save</button>
  </mat-tree-node>

  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle
            [attr.aria-label]="'toggle ' + node.filename">
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    <mat-checkbox [checked]="descendantsAllSelected(node)"
                  [indeterminate]="descendantsPartiallySelected(node)"
                  (change)="todoItemSelectionToggle(node)">{{node.item}}</mat-checkbox>
    <button mat-icon-button (click)="addNewItem(node)"><mat-icon>add</mat-icon></button>
  </mat-tree-node>
</mat-tree>

前述のとおり、完全なソースコードとそのデモの動作を確認するには、次のURLにアクセスしてください https://stackblitz.com/angular/gabkadkvybq?file=app%2Ftree-checklist-example.html

ありがとう。

angularangular-materialangular-formsangular-template
4
Juan Vega

（Stackblitzのデモリンクにある）選択リストはあなたが望むものだと思います。これは、MatTreeの選択を自分で追跡する必要があることを意味します。ノードで使用しているMatCheckboxesを処理する方法がわからないため、これは行われません。

デモでは、これはSelectionModel（MatTreeの一部ではない_@angular/cdk/collections_のコレクション）を使用/保守することで実現されます。変更されたStackblitzの例は here です（MatTreeでいくつかのノードwith childrenを選択するだけです）。

デモの重要な部分は、MatCheckboxをクリックするたびに、todoItemSelectionToggleメソッドをトリガーするために使用される@Output() changeそのチェックボックスを起動し、SelectionModelを更新することです。

_  /** Toggle the to-do item selection. Select/deselect all the descendants node */
  todoItemSelectionToggle(node: TodoItemFlatNode): void {
    // HERE IS WHERE THE PART OF THE MODEL RELATED TO THE CLICKED CHECKBOX IS UPDATED
    this.checklistSelection.toggle(node); 

    // HERE WE GET POTENTIAL CHILDREN OF THE CLICKED NODE
    const descendants = this.treeControl.getDescendants(node);

    // HERE IS WHERE THE REST OF THE MODEL (POTENTIAL CHILDREN OF THE CLICKED NODE) IS UPDATED
    this.checklistSelection.isSelected(node) 
      ? this.checklistSelection.select(...descendants)
      : this.checklistSelection.deselect(...descendants);
  }
_

SelectionModelは、Setに基づくコレクションで、_@angular_チームが複数の選択を可能にするコンポーネントを使用する開発者が使用するために作成したもので、コンポーネントの変更の追跡に役立ちます。このコレクションの詳細については、こちらをご覧ください： https://github.com/angular/components/blob/master/src/cdk/collections/selection-model.ts

JavaScriptのすべてのように、ここには魔法はありません。基本的に、そのコンストラクターはブール引数を受け入れて、_SelectionModel<T>_（ジェネリック）が複数の値（true）または単一の値を格納するかどうかを定義します。また、オブジェクトを追加するsort(predicate?: (a: T, b: T) => number)、select(...values: T[])、オブジェクトを削除するdeselect(...values: T[])、追加するtoggle(o: T)などの便利なメソッドもあります（追加しない場合） t存在する）または削除する（既に存在する場合）。内部的には、比較はデフォルトで参照によって行われるため、_{a:1} != {a:1}_です。

5
julianobrasil

チェックリスト選択から直接値を取得できます

値= this.checklistSelection.selected

これは、すべてのチェックされたアイテムの値を正確に返します

2
Bruce

あなたが言及した例は、Angular材料選択モデルを使用しました。

プロパティ= SelectionModelおよびモデルのタイプ= TodoItemFlatNodeの場合。あなたはそれを->

    /** The selection for checklist */
  checklistSelection = new SelectionModel<TodoItemFlatNode>(true);

これで、checklistSelectionプロパティが構成され、これらすべてのメソッドにアクセスできます。

changed、hasValue、isSelected、selection、onChange、toggleなど。

したがって、上記のメソッドにアクセスして、選択ロジックを適用できます。

例

this.checklistSelection.isSelected ?
0
saidutt

正確な答えではありませんが（まだありません）、同じ問題のatmに対処し、コメントを追加するのに十分な評判がないため、ここに投稿します（変更、ルールに違反している場合は削除してください） ）。

私にはマットツリーがバグだと思われます。それについてはすでにここで話しました： https://github.com/angular/material2/issues/114 、しかしそこに提供された解決策はまだ子供/親のチェックを解除/チェックするときの奇妙な動作を解決しませんでしたノード。これはおそらく、jpavelが言及したSelectionModelから取得する値に転送されます。この機能を扱っているので、注意してください。

0
icpero