Question

我已经创建了一个表单，我使用的是角形材质，并且可以在文本字段或textarea字段中成功获取并设置值，但无法在下拉菜单中输入值，我有两个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设置默认值。非常感谢。顺便说一句，今天是我的生日，所以不要忘记祝我。大声笑

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），因此不需要[[值]]
您也不需要在mat-select表单中使用必填属性，这将在您的控制台中引发恼人的警告。
您的默认值不必是数组，您可以直接使用对象：）
将您的价值设定者和所需的验证移动到模型中

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

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下拉列表中

3 个答案: