在页面加载时将默认值放在垫选择下拉列表中答案

【问题标题】：on page load put default value in mat select dropdown在页面加载时将默认值放在垫选择下拉列表中
【发布时间】：2019-10-04 15:29:04
【问题描述】：

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

  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>

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

【问题讨论】：

我可以在“this.defaultCat= defaultSelectCategory[0].CAREGORY;”这一行看到一个错字，请将 CAREGORY 替换为 CATEGORY
谢谢你.. 但还是不行..需要解决方案

标签： angular typescript angular-reactive-forms angular-material-7

【解决方案1】：

尝试使用 ngModel

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

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

【讨论】：

【解决方案2】：

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

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

日期选择器 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>

日期选择器 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() {
  }
}

【讨论】：

你成就了我的一天..虽然声明不是问题，但这对我有用...非常感谢。

【解决方案3】：

首先，我建议几件事：

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

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

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>

【讨论】：