当用户在搜索栏中输入文本时显示列答案

【问题标题】：Show column when ever the user input text in the search bar当用户在搜索栏中输入文本时显示列
【发布时间】：2020-03-26 22:54:47
【问题描述】：

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

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

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

【问题讨论】：

你应该改进这个问题，这很不清楚
@fercaveri，我解决了我的问题。感谢您的评论。

标签： html css angular layout multiple-columns

【解决方案1】：

// .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;
  });

【讨论】：

【解决方案2】：

您可以订阅表单控制器的 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>

【讨论】：