как скрыть столбец, когда ввод пуст в Angular - PullRequest
Новая
       80

как скрыть столбец, когда ввод пуст в Angular

0 голосов
/ 09 апреля 2020

У меня три гибких столбца, и я хочу, чтобы средний столбец скрывался при пустом вводе.

Моя цель - сначала спрятать средний столбец, показать средний столбец, когда пользователь начнет печатать, и снова скрыть когда ввод пуст.

Я смог сделать первые два, но не уверен, как его спрятать снова

Я думаю, что, возможно, придется что-то делать с * ngЕсли во входном или в среднем столбце, но я новичок в 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;
      });

1 Ответ

1 голос
/ 09 апреля 2020

Вы можете использовать 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;
         }

      });

Надеюсь, это поможет!

...