时间戳

首页 > 解决方案 > Angular Material - mat-select 无故停止工作

angular - Angular Material - mat-select 无故停止工作

问题描述

我的一个组件中有一个 mat-select 组件，如下所示

<div id="graph-textbox">
    <input type="textbox" class="form-control" [(ngModel)]="graph1_query"
      placeholder="Search for Entities/Relations"
      (keyup)="EnterKeyupChecker('graph-search',$event)"
    >
</div>
<div style="padding-right: 5px" class="graph-dropdown">
    <mat-form-field appearance="fill" style="width: 100%;">
        <mat-label>Select Type</mat-label>
        <mat-select [(ngModel)]="graph1_type_query"
          (selectionChange)="graph1_subtype_query='';InGraph1Search();"
        >
            <mat-option value="">None</mat-option>
            <mat-option *ngFor="let type of type_dropdown" [value]="type">
                {{type}}
            </mat-option>
        </mat-select>
    </mat-form-field>
</div>

直到昨天，这个 mat-select 一直运行良好，显示选项，甚至执行选择操作。当我今天开始使用我的 Angular 应用程序时，它没有显示任何选项，当我单击它时只会突出显示 mat-label。代码中绝对没有任何改变。

graph1_type_query 的值是''在 .ts 文件中的声明，之后在整个代码中都没有触及。graph1_query 的值按预期工作。

到目前为止我遇到的情况：

  1. 使用[(value)]而不是 [(ngModel)]。没区别。
  2. 检查我的type_dropdown数组是否实际填充。将其记录到控制台并在 p 标签中打印出整个数组（使用相同的 ngFor 循环）并且它可以工作，甚至可以按预期随文本输入值（graph1_query）一起改变。
  3. 我什至用 mat-select 的一个简单示例替换了 mat-select，但即使这样也没有显示任何选项。
<mat-select [(ngModel)]="graph1_type_query">
    <mat-option value="">None</mat-option>
    <mat-option value="One">One</mat-option>
    <mat-option value="Two">Two</mat-option>
    <mat-option value="Three">Three</mat-option>
</mat-select>
  1. 检查角度和角度材料的兼容性
    角度/核心：12.2.2
    角度/材料：12.2.2
    还尝试了材料版本 11.2.13 和 12.2.5
  2. 使用占位符属性
  3. 检查 App 模块文件中是否已导入 MatSelectModule。我还有其他具有类似代码的工作垫选择组件。

更新：它与本机选择完美配合。mat-select 的问题可能是什么？

标签： angularangular-materialngmodelmat-select

解决方案

推荐阅读