Невозможно настроить высоту строки элементов списка в матричном дереве

Question

Я работаю с mat-tree в своем приложении Angular 7.Выглядит это так:

<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">

<mat-tree-node *matTreeNodeDef="let node">
  <li>
    <span *ngFor="let item of getArrayForIndenting(node)">&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <button mat-icon-button disabled></button>
    {{ node.name }}: {{ node.value }}
  </li>
</mat-tree-node>

<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
  <div>
    <span *ngFor="let item of getArrayForIndenting(node)">&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <button mat-icon-button matTreeNodeToggle>
      <mat-icon class="mat-icon-rtl-mirror">
        {{ nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
      </mat-icon>
    </button>
    {{ node.name }}
  </div>
  <ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
    <ng-container matTreeNodeOutlet></ng-container>
  </ul>
</mat-nested-tree-node>

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

Я перепробовал все.Я пытался стилизовать высоту различных элементов в вышеупомянутой разметке, высоту строки, поля, отступы и т. Д., Но ничего не работает.

По данным этого сайта:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_ul_compact_css

Я должен иметь возможность установить высоту строки для элемента ul, но я попробовал это, и это не сработало.

Может кто-нибудь сказать, что я долженделать?Спасибо.

РЕДАКТИРОВАТЬ: Вот CSS:

.example-tree-invisible {
  display: none;
}

.example-tree li,
.example-tree ul {
  list-style-type: none;
}

Обратите внимание, что я удалил класс "mat-tree-node", потому что он не существует.

В моем файле index.html есть также ссылка на fonts.googleapis.com:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

... это, вероятно, происхождение mat-icon-rtl-mirror.

Hopeэто помогает

Answer 1

просто используйте .css для переопределения минимальной высоты, например

.mat-tree-node {
    min-height:1.6rem; //min-heigth:0 if you want the min heigth possible
}

Answer 2

Да, вы правы, вы должны иметь возможность установить высоту строки элементов ul или li.Тем не менее, вы не вставили CSS для приведенного выше кода.Пожалуйста, дайте нам css или создайте https://plnkr.co/, чтобы мы могли отладить и помочь вам.Также возможно, что у вас может быть поле или отступ в элементе ul или li, проверьте это также.