我正在尝试将Angular代码从Bootstrap迁移到Material design。我需要显示项目列表（例如汽车）。我有一个汽车列表组件和汽车项目组件。如果可能，我想将其分开。
不幸的是，得到的10个项目的列表在一行上显示为10个方框，而不是预期的10行。
我的问题是：我可以在其中使用单独的组件<mat-list-item>吗？
我遇到的所有棱角材料示例均在节点内显示了带有ngFor指令和物料模板代码的mat-list-item。这意味着将项目功能移到列表中。
car-list-component.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>
car-item.component.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不变。
在有关Angular Material的所有示例和教程中都介绍了这一点。它将对我有用，但是正如我之前说过的，如果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>
您可以将mat-list-item作为指令添加到您的app-car-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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句