mat-list в угловой 5

Question

У меня есть вопрос о реализации mat-list в угловых 5.

У меня был этот код, когда у меня был разделитель, внутри которого находился элемент mat-list-item, но линия делителя не показывалась всегда

<mat-list >
   <mat-list-item class="pathitem" *ngFor="let item of Lst" style="height: 76px;">
<div>
<h3>item.title</h3>
<p>item.desc</p>
<p>item.ad</p>
</div>
<mat-divider class="background-divider"></mat-divider>
        </mat-list-item>
      </mat-list>

тогда я изменяю это для этого:

<mat-list *ngFor="let item of LstTramosFiltro" >
          <mat-list-item class="pathitem" style="height: 76px;">
<div>
<h3>item.title</h3>
<p>item.desc</p>
<p>item.ad</p>
</div>
        </mat-list-item>
<mat-divider class="background-divider"></mat-divider>
      </mat-list>

Мой вопрос заключается в том, какое из двух является правильным решением, если вы используете ngfor в mat-list или в mat-list-item;и где правильное использование мат-делителя

спасибо за вашу помощь.

Answer 1

первый является текущим.Элемент, который вам нужно перебрать, должен иметь ngFor.Если вы хотите включить разделитель, вы можете обернуть оба элемента в шаблон ng следующим образом:

<mat-list>
    <ng-template *ngFor="let item of LstTramosFiltro">
        <mat-list-item class="pathitem" style="height: 76px;">
            <div>
                <h3>item.title</h3>
                <p>item.desc</p>
                <p>item.ad</p>
            </div>
            </mat-list-item>
        <mat-divider class="background-divider"></mat-divider>
    </ng-template>
</mat-list>

Answer 2

Вы должны использовать ngFor для mat-list-item, а не mat-list, при условии, что вы хотите отобразить только один список элементов.

Ссылки на документы: https://material.angular.io/components/list/examples, https://material.angular.io/components/divider/overview

Если вы хотите, чтобы разделитель отображался после каждого элемента, кроме последнего, его можно вставить как часть mat-list-item (что, я думаю, вы сделали), например:

<mat-list>
    <mat-list-item class="pathitem" *ngFor="let item of Lst; last as last" style="height: 76px;">
        <h3>item.title</h3>
        <p>item.desc</p>
        <p>item.ad</p>
        <mat-divider class="background-divider" *ngIf="!last"></mat-divider>
    </mat-list-item>
</mat-list>

Answer 3

Во-первых, ngfor должен быть помещен в элемент mat-list вместо элемента mat-list, в противном случае вы получите несколько списков, каждый из которых имеет несколько элементов mat-list-item, и если у вас есть несколько разделов, вы можете использовать разделитель матов.чтобы разделить на разные секции, разделитель матов должен быть помещен между двумя элементами mat-list-item, а не внутри mat-list-item.Проверьте https://material.angular.io/components/list/overview#lists-with-multiple-sections для деталей.