如何在 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>