时间戳

首页 > 解决方案 > 隐藏用户选择的材料卡不起作用

angular - 隐藏用户选择的材料卡不起作用

问题描述

我正在创建一种启动板类型的应用程序，其中材料卡将在用户选择时加载。为了动态处理这个问题，我试图从 TS 类中隐藏元素，但更改并没有反映在浏览器上。卡片的重新制作是根据需要使其动态化的规则进行的。为了使它工作，我正在尝试使用一张卡的更简单的场景：卡代码如下：

    <mat-card class="launchpad-tiles"
  [class.mat-elevation-z8]="true"
  (click)="onCardClick($event)"
  matRipple
  [matRippleCentered]="true"
  [fxHide]="preg" #tiles>
      <mat-card-header>
        <div mat-card-avatar class="patient-image"></div>
        <mat-card-title>Patient Registration</mat-card-title>
        <mat-card-subtitle>Create new patient</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
    </mat-card-content>
  </mat-card>
  <mat-card class="launchpad-tiles"

我使用 viewchild 指令来获取引用，然后在钩子 AfterViewInit 中设置属性。属性的更改不会反映在浏览器上。不确定我是否使用了正确的钩子方法。

@ViewChild(MatCard, { read: ElementRef, static: false }) lpadTiles: ElementRef;

ngAfterViewInit() {
this.lpadTiles.nativeElement.setAttribute('hidden', 'true');
}

我也尝试将 Flex-Layout 属性 FX-HIDE 设置为 True，但这也没有用。

我在 Angular 上工作了一个月，所以我可能会遗漏一些基本的东西。请让我知道是否有更好的方法来处理此要求。

标签： angulardynamic

解决方案

如果要从 dom 中删除某些东西，可以在 angular Like 中使用 *ngIf structrual 指令。

<ng-container *ngIf="condition">data</ng-container>

当您的条件为真时，数据将可见，而当它为假时，则不会显示。其他你可以像这样使用的东西

<div [hidden]="true/false"> data</div>

它将工作相同，但不会从 dom 中删除元素。

推荐阅读