我正在尝试将 Angular 代码从 Bootstrap 迁移到 Material design。 我需要显示项目列表(例如汽车)。我有一个汽车列表组件 和汽车项目组件。如果可能的话,我想将其分开。
遗憾的是,包含 10 个项目的结果列表显示为一行 10 个方框,而不是预期的 10 行。
我的问题是:我可以在 <mat-list-item>
中使用单独的组件吗? ?
我遇到的所有 Angular Material 示例都显示了 mat-list-item 以及节点内的 ngFor 指令和项目模板代码。这意味着将项目功能移至列表中。
Bootstrap 版本
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>
我的 Angular Material 版本带有单独的项目模板
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 示例。
这在 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>
关于angular - 如何在 Angular Material List 中使用 Item 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58477720/