如何在 Angular Material List an Item 组件中使用

Question

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

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

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

我遇到的所有 angular 材料示例都显示了带有 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>

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 材质版本，带有单独的项目模板

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 带有“内联”项目模板的材料示例。

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

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 作为指令添加到您的 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>