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

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&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;<div class="center" *ngIf="showColumn">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="chart-header">Charts</div>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>Chart will display here</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;//.ts file&nbsp; &nbsp;showColumn = false;&nbsp; &nbsp; &nbsp;this.form.get('inputCtrl').valueChanges.subscribe(() => {&nbsp; &nbsp; this.showColumn = true;&nbsp; });

Answer 2

您可以订阅表单控制器的 valueChanges 事件TS文件this.form.get("inputCtrl").valueChanges.subscribe(selectedValue => {&nbsp; this.displayStyle = 'block';})HTML 文件<div class="center" [ngStyle]="{'display':displayStyle}>&nbsp; &nbsp; <div class="chart-header">Charts</div>&nbsp;&nbsp;&nbsp; &nbsp; <div>Chart will display here</div></div>