Угловой материал - директивная мат-карта ничего не делает

Question

Я использую Angular Material в этом проекте, и все остальное пока работает нормально. Но по какой-то причине добавление mat-card ничего не делает. Из того, что я видел в другом месте, следует хотя бы добавить класс .mat-card, но он даже не делает этого.

Код <h2 mat-card >Details</h2>. Я также попробовал это на элементе <div>: все еще ничего.

Модуль MatCardModule импортируется точно так же, как и любой другой модуль, который я использую в этом проекте.

Попытка добавления полей, как предложено для другого вопроса здесь. Не исправить это. Что-нибудь, что я мог попробовать?

Answer 1

mat-card следует использовать в качестве компонента , например

<mat-card>Simple card</mat-card>

В пределах mat-card вы можете добавить mat-card-content, mat-card-title и т. Д.

Примериз документов

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
      bred for hunting.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

Answer 2

mat-card это элемент, а не атрибут. Вы можете использовать его как элемент или добавить class = "mat-card" для тега h2.

Проверьте ссылку ниже.

https://stackblitz.com/edit/angular-gnaboe?file=app/card-fancy-example.html