我的應用程式允許用戶將檔案上傳到資料庫，我還有一個 mat-select 組件，用戶可以在其中選擇他們想要上傳的 Excel 作業表。
如果用戶選擇 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>
uj5u.com熱心網友回復：
我相信 [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 中洗掉選擇，而 [hidden] 只是對元素應用 display: none ，因此它仍然在 DOM 中呈現。因此，如果您創建了一個期望具有選擇輸入的反應式表單，如果您使用 ngIf 將其洗掉，則會導致錯誤。但是，您似乎只是在使用 select 本身并與 ngModel 一起使用，因此這對您來說不是問題。
編輯1：
作業 stackblitz 顯示可能的解決方案： https ://stackblitz.com/edit/angular-5ykmue?file=src/app/select-overview-example.html
編輯2：
我糾正了無法使用 [hidden] 屬性的問題，如果將表單欄位包裝在 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/466915.html
標籤：javascript html 有角度的 if 语句 隐