0

我创建了一个表单，我正在使用角度材料，我可以成功获取并设置文本字段或 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。太感谢了。顺便说一句，今天是我的生日，所以别忘了祝福我。哈哈

4

3 回答 3

1

尝试使用 ngModel

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

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

于 2019-10-03T10:37:29.617 回答
0

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

  • 由于您使用的是模型驱动表单（使用 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>

于 2019-10-04T07:29:04.117 回答
0

我可以在您的代码中看到很多问题，变量（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() {
  }
}
于 2019-10-04T07:13:21.107 回答