将材料卡隐藏在用户选择上不起作用

Question

我正在创建一个启动板类型的应用程序，将在用户选择的位置加载物料卡。为了动态地处理此问题，我试图隐藏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指令来获取引用，然后在hook AfterViewInit中设置属性。属性的更改未反映在浏览器上。不知道我是否使用正确的钩子方法。

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

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

我还尝试将Flex-Layout属性FX-HIDE设置为True，但这也行不通。

我仅在一个月的角度学习上，所以我可能缺少一些基本知识。请让我知道是否有更好的方法来处理此要求。

Answer 1

如果要从dom中删除内容，可以在angular Like中使用* ngIf structrual伪指令。

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

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

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

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