угловой материал условный подзаголовок

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

<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>
  </mat-card>
</div>

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

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


angular angular-material-6 mat-card
person user1383163    schedule 22.07.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

[hidden] {
    display: none !important;
}

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

person joh04667    schedule 23.07.2018
comment
это действительно решает текущую проблему, я решил использовать оператор ngSwitch, я также отметил, что мне нужна переменная @Input, назначенная другой переменной, чтобы она могла выбрать переменную, что странно, но я уверен, что выясню, почему это так дело в какой-то момент. Во-вторых, я также отметил, что изменился макет, что, к сожалению, выходит за рамки этого вопроса, большое спасибо. - person user1383163; 29.07.2018

arrow_upward
1
arrow_downward

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

<mat-card-subtitle>{{shouldHideSub?'Linked':'Unlinked'}}</mat-card-subtitle>
person Wandrille    schedule 22.07.2018