Выбор таблицы первичных деревьев не работает должным образом

Question

У меня забавная проблема с таблицей дерева, когда я использую секцию дерева, выбор устанавливается для всей таблицы, а не для выбранной строки.

есть проект stackblitz
https://stackblitz.com/edit/angular-primeng-table-toggle-4tmfyk?file=src%2Fapp%2Fapp.component.ts

Answer 1

Режим выбора таблицы дерева сравнивает каждый узел / строку в дереве с выбранным узлом и, при совпадении, выбирает этот узел.Таким образом, в вашем примере stackblitz, поскольку у вас есть три узла данных, точно совпадающих с данными {name: 'Desktop', size: '20mb', type: 'Folder'}, все три строки отображаются как выбранные при нажатии любой из трех.

Один из способов исправить это - добавитьуникальное четвертое поле (индекс, родитель или что-то еще, уникальное для каждого экземпляра) для каждого элемента данных.Затем, даже если дополнительное поле не отображается в древовидной таблице, оно будет представлять каждый узел уникальным.

Обратите внимание, что для этого решения вам также необходимо либо удалить атрибут dataKey из вашего элемента,поскольку это ограничивает сравнение выбора только значением поля name или измените dataKey на уникальное поле (например, index).Поэтому измените:

<p-treeTable [value]="files2" [columns]="cols" selectionMode="single" [(selection)]="selectedNode1" dataKey="name">

на:

<p-treeTable [value]="files2" [columns]="cols" selectionMode="single" [(selection)]="selectedNode1" dataKey="index">

... и затем измените узлы дерева данных, включив в него поле index:

myfiles: TreeNode[] = [
    { data: { name: 'Desktop', size: '20mb', type: 'Folder', index: 0 }},
    { data: { name: 'Cloud',   size: '20mb', type: 'Folder', index: 1 },
       children: [
         { data: { name: 'backup-1.zip', size: '10mb', type: 'Zip', index: 2 }},
         { data: { name: 'backup-2.zip', size: '10mb', type: 'Zip', index: 3 }},
       ]
    },
    { data: { name: 'Desktop', size: '20mb', type: 'Folder', index 4 },
       children: [
         { data: { name: 'backup-1.zip', size: '10mb', type: 'Zip', index: 5 }},
         { data: { name: 'backup-2.zip', size: '10mb', type: 'Zip', index: 6 }},
       ]
    },
    { data: { name: 'Desktop', size: '20mb', type: 'Folder', index: 7 }}
];

Поле 'index' в моем обновленном дереве данных дает выбранной вами уникальность.