0

我有以下内容：

<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用来指定 mat-card-avatar 图片的类。

这是不可能的还是我错过了什么？

4

2 回答 2

1

如果您只想显示名称：

<mat-card-subtitle>{{shouldHideSub?'Linked':'Unlinked'}}</mat-card-subtitle>
于 2018-07-22T21:46:10.390 回答
1

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

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

[hidden] {
    display: none !important;
}

...但是!important旗帜可以被视为粗俗而不是良好的做法。最重要的是，其他视图指令如fxFlex可以覆盖[hidden]显示样式。通常最好使用*ngIf属性，或者在这种情况下，使用*ngSwitch规则。

于 2018-07-23T00:08:25.307 回答