我有一個組件，它有一個按鈕。該按鈕連接到.ts檔案中的一個函式。現在，我希望該函式添加一個 HTML 元素，或者在單擊按鈕時取消隱藏它。我基本上只是希望一個 html<div>元素在螢屏上可見（帶有一些動態資料）。
以下是component.html檔案中按鈕的外觀：
<button mat-button (click)="getInfo()" mat- cdkFocusInitial>Ok</button>
以下是檔案getInfo()中的函式component.ts當前的樣子：
getInfo(){
console.log("Button clicked");
}
所以我的目標是，單擊按鈕時，螢屏上會出現一些元素，或者可能會出現另一個角度組件。關于如何實作這一目標的一些建議將非常有幫助。
提前致謝！
PS：我對前端開發很陌生，但我確實嘗試在 Stack-overflow 上閱讀和搜索，但沒有得到全面的資訊。
uj5u.com熱心網友回復：
您可以通過在組件中簡單地添加一個布林值來做到這一點。
showEl = false;
并點擊按鈕，
getinfo() {
this.showEl = !this.showEl;
}
在模板中，您可以使用*ngIf顯示/隱藏內容。
uj5u.com熱心網友回復：
<button (click)="isShowInfo = !isShowInfo">Toggle me</button>
<div *ngIf="isShowInfo">
<p>Here is my info</p>
</div>
uj5u.com熱心網友回復：
您可以使用 angular 的標簽來簡化代碼。
<button (click)="testId.style.visibility = 'visible'">Unhide me</button>
<div style="visibility: hidden;" #testId>
i am hidden
</div>
如果您想從打字稿中取消隱藏它，您必須使用它@ViewChild來查看隱藏的元素，并且當您在單擊時呼叫一種方法時，您會將可見性設定為可見
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/416725.html
標籤：