如何在角度材料中使用 列出项目组件

Question

我正在尝试将 Angular 代码从 Bootstrap 迁移到 Material design。 我需要显示项目列表(例如汽车(。我有一个汽车清单组件 和汽车物品组件。如果可能的话，我想把它分开。

不幸的是，生成的 10 个项目列表显示为一行上的 10 个方框，而不是预期的 10 行。

我的问题是：我可以在<mat-list-item>中使用单独的组件吗？

我遇到的所有角度材料示例都显示了节点内带有 ngFor 指令和项目模板代码的mat-list-item。这意味着将项目功能移动到列表中。

引导程序版本

汽车列表组件.html

<div class="row">
<div class="col-xs-12">
<router-outlet></router-outlet>
<app-car-item
*ngFor="let carItem of cars"
[car] = "carItem"
></app-car-item>
</div>
</div>

汽车项目组件.html

<div>
<div>
<a (click)="carDetail(car.id)">
<span>{{ getMakeLabel(car.make)}} : {{car.carModel.modelName}} </span>
</a>
</div>
<div>
<a (click)="remove(car)"><i class="material-icons">delete</i>
</a>
</div>
</div>

具有单独项目模板的"我的角度材质"版本

car-list.component.html

<div>
<mat-list role="list">
<mat-list-item>
<router-outlet></router-outlet>
<app-car-item
*ngFor="let carItem of cars"
[car] = "carItem"
></app-car-item>
</mat-list-item>
</mat-list>
</div>

car-item.component.html不会改变。

具有"内联"项目模板的角度材料示例。

这在关于角度材料的所有示例和教程中都有介绍。它对我有用，但正如我之前所说，如果 Item(car( 是一个比本例更复杂的对象，那么我想单独保留它。

car-list.component.html

<mat-list>
<mat-list-item *ngFor="let car of cars">
<a style="cursor: pointer;" (click)="carDetail(car.id)">
<span>{{ getMakeLabel(car.make)}} : {{car.carModel.modelName}} </span>
</a>
</mat-list-item>
</mat-list>

Answer 1

您可以将 mat-list-item 作为指令添加到您的应用汽车项组件中。 请参考 https://stackblitz.com/edit/angular-blzeb1

<mat-list role="list">
<app-car-item mat-list-item
*ngFor="let carItem of cars"
[car] = "carItem"
></app-car-item>
</mat-list>