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

Question

我有三个弹性列，我希望中间列在输入为空时隐藏。

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

I was able to do the first two but not sure how to hide it again

我想我可能必须在输入或中间列中使用 *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;
         }

      });

希望对您有所帮助！