Question

我做了一个角度4项目，在标题中我添加了一个搜索栏，我想知道如何在需要时启用和禁用搜索栏。

 <form *ngIf="!authService.isAnonyme()" class="navbar-form navbar-left"  role="search">
                <div class="input-group">
                  <input  type="text" class="form-control" placeholder="Search.." [(ngModel)]="_search"  name="srch-term" id="srch-term" >
                  <div class="input-group-btn">
                    <button class="btn btn-default" (click)="Search()">
                      <i class="glyphicon glyphicon-search"></i>
                    </button>
                  </div>
                </div>
              </form>

Answer 1

您可以停用搜索栏，如下所示。您没有提到任何代码或禁用搜索栏的条件是什么。所以，在这里我对变量的值进行了验证：limit。您可以根据需要进行更改。

                <label class="search">
                    <i class="fa fa-search search-icon"></i>
                    <mat-form-field class="example-full-width">
                        <input matInput [(ngModel)]="searchName" [disabled]='limit' >
                    </mat-form-field>
                </label>

在TS文件中，

/* if you want to disable the field*/
    limit = true 
/* if you want to enable the field*/
    limit = false

Answer 2

您的答案可用于您想要的任何组件

<form *ngIf="!authService.isAnonyme()" class="navbar-form navbar-left"  role="search">
            <div class="input-group">
              <input  type="text" class="form-control" placeholder="Search.." [(ngModel)]="_search" [disable]="searchSomething" name="srch-term" id="srch-term" >
              <div class="input-group-btn">
                <button class="btn btn-default" (click)="Search()">
                  <i class="glyphicon glyphicon-search"></i>
                </button>
              </div>
            </div>
          </form>

in ts

searchSomething: boolean = false;

Search() {
   this.searchSomething = !this.searchSomething;
}

如何启用和禁用搜索栏（bootstrap4）

2 个答案: