Mat-select 不是选择选项

时间:2021-06-16 20:50:43

标签: angular forms angular-material

我有一个带有 mat-select 字段的表单。我使用来自后端的值通过 API 调用初始化此字段。但是 mat-select 没有从选项中选择任何值。我尝试了所有可能的答案,我在 Stack Overflow 上从之前关于这个问题的问题中找到了答案,但没有一个有效。

我的组件的 ts 文件:

levels = [1, 2, 3, 4]; 

ngOnInit() {
      this.myService.getData.subscribe((res) => {
         this.initForm(res);
      })
  } 

 initForm (data) {
    this.myForm = this.fb.group({
      Level: [data ? data : ""]
 });

我的组件的 html 文件:

<form [formGroup]="myForm">
       <mat-form-field appearance="outline" class="w-100-p">
        <mat-label>Level</mat-label>
        <mat-select formControlName="Level">
       <mat-option value="i" *ngFor="let Level of levels; index as i">{{ Level }}</mat-option>
        </mat-select>
    </mat-form-field>
  </form>

在我的 levels 数组中,它只能有 1、2、3、4 的值,响应也将包含 1-4 的值。我已经使用控制台日志检查过数据是否正确。基本上,在这个表单中,除了这个 mat-select 字段之外,我有几个字段都可以正常工作。其他字段不是 mat-select 字段。

1 个答案:

答案 0 :(得分:1)

您可以在此 stackblitz 2 个工作示例中找到您的问题。

您共享的代码中的一个问题是 mat-option 值上缺少 [] 另一个我认为是使用从 0 开始的索引在您可以在您的数据中放置偏移量表格

如果仍然不是问题不在这部分代码中