angular material 条件字幕

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

我想有条件地显示字幕，但出于某种原因我不能像上面那样使用隐藏，ng-if 似乎也不起作用，我也不能使用 ngClass 来指定 class用于垫卡头像图片

这是不可能的还是我遗漏了什么？

Answer 1

如果只想显示姓名：

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

Answer 2

[hidden] 是 Angular 在大多数 DOM 元素（但不是全部）上查找的内部属性。自定义组件（即自定义 DOM 元素）不会包含此逻辑。

快速解决方法是将属性添加为全局 CSS 规则：

[hidden] {
    display: none !important;
}

...但是 !important 标志可以被视为粗暴而不是好的做法。除此之外，其他视图指令如 fxFlex 可以覆盖 [hidden] 显示样式。通常最好使用 *ngIf 属性，或者在本例中，使用 *ngSwitch 规则。

angular material 条件字幕

angular material conditional subtitle

angular

mat-card

angular-material-6