如何使用 if 语句隐藏 HTML 元素？

Question

我的应用程序允许用户将文件上传到数据库，我还有一个 mat-select 组件，用户可以在其中 select 他们想要的 excel 工作表上传。

如果用户 select 是 CSV 文件，我想隐藏这个 mat-select 组件，但是我的 [hidden]="hideDropdown" 似乎不起作用。

hideDropdown: boolean;

if (this.file.type == "text/csv") {
  this.hideDropdown = true;
} else {
  this.hideDropdown = false;
}

<mat-form-field *ngIf="sourceFile" id="worksheetStyle" appearance="fill">
  <mat-label>Excel Worksheet</mat-label>
  <mat-select [hidden]="hideDropdown" [(ngModel)]="selectedSheet" (selectionChange)="selectWorksheet()">
    <mat-option *ngFor="let worksheet of worksheetNames" [value]="worksheet">
      {{worksheet}}
    </mat-option>
  </mat-select>
</mat-form-field>

Answer 1

我认为 [hidden] 属性不起作用的原因是因为它不存在于 mat-select 上，仅存在于 html-tags 上，因为它是核心 html 属性。您可以改为使用 *ngIf，如下所示：

  <mat-select *ngIf="hideDropDown" [(ngModel)]="selectedSheet" 
  (selectionChange)="selectWorksheet()">
   <mat-option *ngFor="let worksheet of worksheetNames" [value]="worksheet">
     {{worksheet}}
   </mat-option>
 </mat-select>

但是应该注意的是，*ngIf 将从 DOM 中完全删除 select，而 [hidden] 只是将显示：none 应用于元素，因此具有它仍然在 DOM 中呈现。因此，如果您创建了一个预期具有 select 输入的响应式表单，那么如果您使用 ngIf 将其删除，则会导致错误。但是，您似乎只是在单独使用 select 和 ngModel，所以这对您来说应该不是问题。

编辑 1：

工作 stackblitz 展示了一个可能的解决方案： https://stackblitz.com/edit/angular-5ykmue?file=src/app/select-overview-example.html

编辑 2：

我纠正了无法使用 [hidden] 属性的错误，如果您将 form-field 包裹在 div 中，您可以使用 hidden 来显示/隐藏，如下所示：

<div [hidden]="hideDropdown">
<mat-form-field *ngIf="sourceFile" id="worksheetStyle" appearance="fill">
  <mat-label>Excel Worksheet</mat-label>
  <mat-select [(ngModel)]="selectedSheet" (selectionChange)="selectWorksheet()">
    <mat-option *ngFor="let worksheet of worksheetNames" [value]="worksheet">
      {{worksheet}}
    </mat-option>
  </mat-select>
</mat-form-field>
</div>

如何使用 if 语句隐藏 HTML 元素？

How to hide a HTML element using an if-statement?

html

javascript

hidden

if-statement

angular