Угловой материал условного субтитра

Question

У меня есть следующее:

<div class="wrapper">
 <mat-card style="margin:1em; width: 250px; border: 1px ridge white">
<mat-card-header>

 <div mat-card-avatar class="verify-header-image"></div>

  <mat-card-title>{{name}}</mat-card-title>
  <mat-card-subtitle [hidden]="shouldHideSub">Linked</mat-card-subtitle>
  <mat-card-subtitle [hidden]="!shouldHideSub">Unlinked</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src={{picture}}
     alt="Portrait of the character">
<mat-card-content>
</mat-card-content>
<mat-card-actions>
  <div class="button-row">
    <button mat-raised-button color="primary">Details</button>
  </div>
</mat-card-actions>

Я хочу показать субтитры условно, но по какой-то причине я не могу использовать скрытый, как у меня выше, ng-if тоже не работает, я также не могу использовать ngClass, чтобы указать класс для изображения mat-card-avatar.

Это просто невозможно или я что-то упустил?

Answer 1

[hidden] это внутренний атрибут, который Angular ищет в большинстве элементов DOM, но не во всех. Пользовательский компонент (т.е. пользовательский элемент DOM) не будет включать эту логику.

Быстрое решение проблемы - добавить атрибут в качестве глобального правила CSS:

[hidden] {
    display: none !important;
}

...но !important Флаг может рассматриваться как грубая и не хорошая практика. Кроме того, другие директивы представления, такие как fxFlex может переопределить [hidden] стиль отображения. Обычно лучше использовать *ngIf атрибут, или в этом случае, *ngSwitch править.

Answer 2

Если вы просто хотите отобразить имя:

<mat-card-subtitle>{{shouldHideSub?'Linked':'Unlinked'}}</mat-card-subtitle>