首页 文章

如何将Angular 5 Material Select下拉列表（mat-select）更改为typescript代码/文件中的一个选项？

提问于
浏览 次
0

所以我有一个Angular 5材料数据表，上面有2个过滤器选项，一个通过文本输入，一个通过下拉列表来过滤特定的字段值 . 对于下拉列表，我使用“mat-select”Angular Material项目，其中包含2个mat-options，一个空，一个基于我拥有的数组，如下所示：

<div class="filterContainer" *ngIf="showDataForm">
  <mat-form-field>
    <input #matInputSearch matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
  </mat-form-field>
</div>
<div class="filterSelectContainer" *ngIf="showDataForm">
  <mat-select placeholder="Search EADDPStage" (selectionChange)="applySelectFilter($event)">
    <mat-option></mat-option>
    <mat-option *ngFor="let stage of EADDPStages[0]" [value]="stage">
      {{stage}}
    </mat-option>
  </mat-select>
</div>

在这里你可以看到我的.ts代码文件：

@ViewChild(MatSelect) set contentSelect(contentSelect: ElementRef) {
    this.select = contentSelect;
  }

  @ViewChild('matInputSearch') set matInputSearch(matInputSearch: ElementRef) {
    this.matInputSearchField = matInputSearch;
  }  

  public applyFilter(filterValue: string) {
    filterValue = filterValue.trim();
    filterValue = filterValue.toLowerCase();
    this.dataSource.filter = filterValue;
  }

  public applySelectFilter(event) {
    // This is to reset dropdown filter to empty/no filter
    if (event.value == null) {
      event.value = '';
    }
    this.applyFilter(event.value);
    // set the "Search" field filter to empty string
    this.matInputSearchField.nativeElement.value = '';
  }

现在在我的用户界面中发生的事情是两个过滤器都能正常工作，但我也希望“重置”（视觉上）过滤器 . 现在，当我在文本框过滤器中输入内容然后从我的下拉列表中选择某些内容时，文本框过滤器的值将设置为空，表示您现在正在过滤下拉列表而不再在文本输入过滤器字段上，以下行是这样的：

this.matInputSearchField.nativeElement.value = '';

但现在我想要另一种方式工作 . 如果我选择一个下拉过滤器，它会过滤，但是当我想在文本输入过滤器字段中输入内容时，过滤器也能正常工作，但下拉选择选项仍然是之前选择的值（即使它的过滤器不再适用） ） . 我想要的是，在这种情况下，当我在文本输入过滤器字段中键入内容时，我的选择下拉列表将返回到我在HTML中添加的空选项，以指示您不再对下拉列表进行过滤选择但是输入过滤器字段中用户输入的内容 .

我基本上需要一种方法来做这样的事情（这是错误的代码btw但只是一个指示）：

this.select.selectedOption('mat-option-0');

我在我的HTML上选择我的“mat-select”项目并给它一个我想要的选项或默认选项，在这种情况下，我的'mat-option-0'是你在我的HTML中看到的空的ID .

这样做有简单的方法吗？

javascript html angular typescript

1 回答

  • 1

    我没有测试过，但尝试这个，应该工作：进行以下更改

    HTML：

    <mat-select placeholder="Search EADDPStage" (selectionChange)="applySelectFilter($event)" [(ngmodel)]="stageValue">
<mat-option></mat-option>
<mat-option *ngFor="let stage of EADDPStages[0]" [value]="stage">
  {{stage}}
</mat-option>

    和组件：

    stageValue = '';
public applyFilter(filterValue: string) {
  filterValue = filterValue.trim();
  filterValue = filterValue.toLowerCase();
  this.dataSource.filter = filterValue;
  this.stageValue = '';
}

    [(ngmodel)]="stageValue" 设置 mat-select 的选定值 .

    回复于

相关问题