[Angular中输入为空时如何隐藏列

Question

我有三个flex列，并且我想在输入为空时隐藏中间列。

我的目标是先隐藏中间列，在用户开始输入时显示中间列，而在输入为空时再次隐藏。

我能够进行前两个操作，但不确定如何再次隐藏它

我相信我可能必须在输入中或中间列中对* ngIf做一些操作，但是我对angular还是陌生的，不确定如何使用。

My Input
           <input matInput [formControl]="inputCtrl" [(ngModel)]="searchText" 
           (ngModelChange)="searchTextChanged($event)" placeholder="Search" class="input"

My Middle Column

    <div class="center" *ngIf="showColumn">

TS

  showColumn = false;


  ngOnInit(): void {

    this.inputCtrl.valueChanges
      .pipe(takeUntil(this.death$))
      .subscribe((value: string) => {
        this.showColumn = true;
      });

Answer 1

您可以使用searchTextChanged($event)

将此功能添加到您的应用程序：

    searchTextChanged(event){
    if(this.searchText == '')
    {
    this.showColumn = false;
    }
     else{
     this.showColumn = true;
    }

或

您可以做这样的事情

this.inputCtrl.valueChanges
      .pipe(takeUntil(this.death$))
      .subscribe((value: string) => {
        if(value == ''){
         this.showColumn = false;
        }
       else{ 
             this.showColumn = true;
         }

      });

希望这会有所帮助！