mat- angular 5中的列表

Question

我有一个关于在angular 5中实现mat-list的问题。

我有这个代码，当我让分隔符插入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>

​

我的问题是，如果在mat-list中使用ngfor还是在mat-list-item中使用ngfor，两者中哪一个是正确的解决方案；在哪里使用mat-divider是正确的

谢谢你的帮助。

Answer 1

首先，ngfor应该放在mat- list -item中，而不是mat-list中，否则你会得到多个list，每个列表都有多个mat-list-item，如果你有多个部分，你可以使用mat-divider来划分不同的部分，mat-divider应该放在两个mat-list-item之间，而不是mat-list-item内。有关详细信息，请查看https://material.angular.io/components/list/overview#lists-with-multiple-sections。

Answer 2

第一个是当前版本。您需要遍历的项应该具有ngFor。如果你想包括分隔符，你可以将这两个项目都包装到ng-template中，如下所示：

<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 3

假设您只想显示单个项目列表，则应该对mat-list-item使用ngFor，而不是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>

​