角度 5 中的 mat-list答案

【问题标题】：mat-list in angular 5角度 5 中的 mat-list
【发布时间】：2018-10-02 19:09:03
【问题描述】：

我有一个关于在 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 中使用，两者中哪一个是正确的解决方案；以及在哪里使用 mat-divider 是正确的

感谢您的帮助。

【问题讨论】：

标签： html angular

【解决方案1】：

首先，ngfor应该放在mat-list-item而不是mat-list中，否则会得到多个list，每个list都有多个mat-list-item，如果有多个section可以使用mat-divider为了分成不同的部分，垫子分隔符应该放在两个垫子列表项之间，而不是垫子列表项内。详情请查看https://material.angular.io/components/list/overview#lists-with-multiple-sections。

【讨论】：

【解决方案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>

【讨论】：

这不会渲染任何东西（ng-template 只是定义了一个模板）。我想你可能打算使用 ng-container？

【解决方案3】：

假设您只想显示单个项目列表，您应该将 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>

【讨论】：