在页面加载时将默认值放在 mat select 下拉列表中

Question

我创建了一个表单，我正在使用 angular material，我可以成功地获取和设置文本字段或文本区域字段中的值，但无法将值放入下拉列表中，我有两个 json数据。第一个将填充下拉列表，然后第二个将设置下拉列表的值。所以加载页面我必须在未设置的下拉列表中显示该值

  createProductForm(): FormGroup {
    return this._formBuilder.group({
      CATEGORY: [this.product.categories]
    });
  }


 ngOnInit() {
  getAllCategory=[
{"TYPE_CODE": "CATEGORY","TYPE_DESC": "PUBLIC"},
{"TYPE_CODE": "CATEGORY","TYPE_DESC": "PRIVATE"},
{"TYPE_CODE": "CATEGORY","TYPE_DESC": "SYSTEM"},
]

defaultSelectCategory=[
{"CATEGORY": "PRIVATE"}
]


this.defaultCat= defaultSelectCategory[0].CATEGORY;
}




<mat-form-field appearance="outline" fxFlex="100">
   <mat-label>Project</mat-label>
   <mat-select formControlName="CATEGORY" [(value)]="defaultCat" required >
 <mat-option *ngFor="let item of getAllCategory" value="{{item.TYPE_DESC}}" (onSelectionChange)="getCATEGORY(item)">
     {{item.TYPE_DESC}}
  </mat-option>

  </mat-select>
     <mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>
   </mat-form-field>

不知道为什么我无法为下拉加载设置默认值。太感谢了。顺便说一句，今天是我的生日，所以别忘了祝我生日快乐。哈哈

Answer 1

尝试使用 ngModel

<div>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</div>

以及垫子选项中带方括号的值

Answer 2

我在你的代码中看到了很多问题，变量（getAllCategory、defaultSelectCategory）是在 ngOnInit() 中声明的，这是错误的。您需要在顶部声明它们并使用 'this' 关键字在 ngOnInit() 中使用它。

我在这里创建了一个工作叉 - https://stackblitz.com/edit/angular-5r6u3p-dhwgqm 看看吧。

DatePicker HTML

<mat-form-field appearance="outline" fxFlex="100">
<mat-label>Project</mat-label>
<mat-select [(value)]="defaultCat" required>
    <mat-option *ngFor="let item of getAllCategory" value="{{item.TYPE_DESC}}"
        (onSelectionChange)="getCATEGORY(item)">
        {{item.TYPE_DESC}}
    </mat-option>
</mat-select>
<mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>

DatePicker TS

export class DatepickerValueExample {
  getAllCategory=[
    {"TYPE_CODE": "CATEGORY","TYPE_DESC": "PUBLIC"},
    {"TYPE_CODE": "CATEGORY","TYPE_DESC": "PRIVATE"},
    {"TYPE_CODE": "CATEGORY","TYPE_DESC": "SYSTEM"},
  ]
  defaultSelectCategory=[
    {"CATEGORY": "PRIVATE"}
  ]
  defaultCat;

  ngOnInit() {
    this.defaultCat= this.defaultSelectCategory[0].CATEGORY;
  }

  getCATEGORY() {
  }
}

Answer 3

所以首先，我建议几件事：

由于您正在使用模型驱动表单（使用 ReactiveFormsModule），因此您不需要 [(value)]
你也不需要 mat-select 形式的 required 属性，这会在你的控制台中抛出一个烦人的警告。
你的默认值不需要是一个数组，你可以直接使用一个对象:)
将您的值 setter 和所需的验证移至您的模型

首先将您的默认值更改为一个对象，或者为了不重复您自己，您可以使用您已有的相同数组来完成：

this.defaultSelectCategory = this.getAllCategory[1];

现在，假设您的下拉列表 formControlName 是这样的：

CATEGORY: new FormControl(this.defaultSelectCategory.TYPE_DESC, [Validators.required]),

然后在你的 HTML:

<mat-form-field appearance="outline" fxFlex="100">
  <mat-label>Project</mat-label>
  <mat-select formControlName="CATEGORY">
  <mat-option *ngFor="let item of getAllCategory" [value]="item.TYPE_DESC">
    {{item.TYPE_DESC}}
  </mat-option>

 </mat-select>
 <mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>

在页面加载时将默认值放在 mat select 下拉列表中

on page load put default value in mat select dropdown

typescript

angular

angular-reactive-forms

angular-material-7