我正在做 Angular 項目，想知道當(dāng)用戶在搜索欄中輸入任何文本時如何顯示中間列。現(xiàn)在，我有用于用戶輸入的搜索欄和三個彈性列。當(dāng)頁面打開時，中間的列是隱藏的，但我希望當(dāng)用戶在搜索框中輸入任何文本時它會顯示。任何幫助將非常感激。.left { flex: 2;}.right { flex: 1;}.center{ flex: 1; display: none;}.parent { display: flex; overflow: hidden; width: 95vw; margin-left: 30px;}<!-- Middle Column --!> <div class="center"> <div class="chart-header">Charts</div> <div>Chart will display here</div> </div> <!-- My user input/ search bar --!> <input [formControl]="inputCtrl" matInput class="input">
2 回答
開心每一天1111
TA貢獻1836條經(jīng)驗 獲得超13個贊
// .html file
<div class="center" *ngIf="showColumn">
<div class="chart-header">Charts</div>
<div>Chart will display here</div>
</div>
//.ts file
showColumn = false;
this.form.get('inputCtrl').valueChanges.subscribe(() => {
this.showColumn = true;
});
呼如林
TA貢獻1798條經(jīng)驗 獲得超3個贊
您可以訂閱表單控制器的 valueChanges 事件
TS文件
this.form.get("inputCtrl").valueChanges.subscribe(selectedValue => {
this.displayStyle = 'block';
})
HTML 文件
<div class="center" [ngStyle]="{'display':displayStyle}>
<div class="chart-header">Charts</div>
<div>Chart will display here</div>
</div>
- 2 回答
- 0 關(guān)注
- 109 瀏覽
添加回答
舉報
0/150
提交
取消