0

我正在做 Angular 项目，想知道当用户在搜索栏中输入任何文本时如何显示中间列。

所以现在，我有用户输入的搜索栏和三个弹性列。当页面打开时，中间列是隐藏的，但我希望它在用户在搜索框中输入任何文本时显示。任何帮助都会非常感激。

.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">

4

2 回答 2

0 
// .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;
  });
于 2020-03-27T06:23:05.240 回答
0

您可以订阅表单控制器的 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>
于 2020-03-27T05:48:38.543 回答