Как добавить отступ в древовидную структуру на основе номера переменной на угловой странице 7 - PullRequest
Новая
       16

Как добавить отступ в древовидную структуру на основе номера переменной на угловой странице 7

0 голосов
/ 01 июня 2019

Я пытаюсь найти способ в своем приложении Angular 7 добавить отступы в древовидное представление на основе уровня узла в дереве.

Я создал древовидное представление на основе этого действительно хорошегоПошаговое руководство:

https://www.youtube.com/watch?v=BALaj39rbZE

Это создает хорошее древовидное представление с расширяемыми узлами, но не выравнивает узлы в зависимости от уровня.

Поэтому я попытался сделать это: 

<mat-tree-node *matTreeNodeDef="let node">
  <li class="mat-tree-node">
    {{ getIndentation(node) }}
    <button mat-icon-button disabled></button>
    {{ node.name }}: {{ node.value }}
  </li>
</mat-tree-node>

…

getIndentation = (node: ResultProperty): string => {
  let indentation = '';

  for (let level = 1; level < node.level; level++) {
    indentation += '  ';
  }

  return indentation;
}

Но, конечно, HTML просто игнорирует пробел, когда есть более одного пробела.

Итак, я попробовал это: 

getIndentation = (node: ResultProperty): string => {
  let indentation = '';

  for (let level = 1; level < node.level; level++) {
    indentation += ‘&nbsp;&nbsp;’;
  }

  return indentation;
}

Но это буквально'' на странице.

Я даже пытался сделать это: 

<li class=“mat-tree-node" style=“padding-left: {{ getPixelsForIndentation(node) }}”>

Но я думаю, у вас не может быть {{}} обозначений в стилях.

Я наконец остановился на этом: 

<span *ngFor="let item of getArrayForIndenting(node)”>&nbsp;&nbsp;&nbsp;&nbsp;</span>

…

getArrayForIndenting(node: ResultProperty): string[] {
  return new Array(node.level);
}

Это работает, но, черт возьми!Неужели это единственный способ добавить отступ, основанный на переменном числе отступов?

Должен быть более простой способ сделать это в угловом формате.Я ищу способ добавить определенное количество пробелов на странице на основе переменной.Какой самый простой способ сделать это?Спасибо.

...