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

Question

我正在做 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">

Answer 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;

  });

Answer 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>