Как использовать в Angular Material List элемент Item - PullRequest
Новая
       0

Как использовать в Angular Material List элемент Item

0 голосов
/ 21 октября 2019

Я пытаюсь перенести Angular-код из Bootstrap в Material design. Мне нужно показать список предметов (например, Автомобили). У меня есть компонент car-list и car-item. Я хочу держать это отдельно, если это возможно.

К сожалению, итоговый список из 10 элементов представлен в виде 10 квадратных блоков на одной строке вместо ожидаемых 10 строк.

Мой вопрос: могу ли я использовать отдельный компонент внутри <mat-list-item>?

Все примеры угловых материалов, с которыми я сталкивался, показали mat-list-item с директивой ngFor и кодом шаблона элемента внутри узла. Это значит переместить функциональность Предмета в Список.

Версия начальной загрузки

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>

Версия My 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 не изменяется.

Пример углового материала с шаблоном элемента «inline».

Это представлено во всех примерахи учебники по угловому материалу. Это будет работать для меня, но, как я уже говорил, если 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>

1 Ответ

1 голос
/ 21 октября 2019

Вы можете добавить 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>
...