具有反应形式自定义材料下拉列表

Question

最近我正在尝试使用值访问器创建自定义下拉列表组件，但我无法为此下拉列表设置值。

下拉组件的这一部分

<mat-form-field>
<mat-label>Favorite food</mat-label>
<mat-select>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>

TS部分

@Input() foods:any
get value(): any {
return this.innerValue;
}
// set accessor including call the onchange callback
set value(v: any) {
console.log(v, "v");
if (v !== this.innerValue) {
this.innerValue = v;
this.onChangeCallback(v);
}
}

应用组件 .HTML：

<app-input-dropdown [foods]="foods" formControlName="dropdown">
</app-input-dropdown>

TS ：

this.foods = [
{ value: "steak-0", viewValue: "Steak" },
{ value: "pizza-1", viewValue: "Pizza" },
{ value: "tacos-2", viewValue: "Tacos" }
];
ngOnInit() {
this.myForm = this.fb.group({
dropdown:[null]
})
const valueToSet = { value: "steak-0", viewValue: "Steak" }
this.myForm.dropdown.patchValue({
dropdown:valueToSet
}) ;
}

所以这是行不通的，我不知道为什么。

Answer 1

我可以想到对您的代码进行一些更改/添加。首先，您应该更改将值设置为表单的方式：

const valueToSet = { value: "steak-0", viewValue: "Steak" }
this.myForm.dropdown.patchValue({
dropdown:valueToSet
}) ;

执行此操作将产生错误，因为this.myForm.dropdown.patchValue内不应有"下拉列表"关键字。应该是 -this.myForm.patchValue.但即使更正了这一点，设置值的正确方法是：

this.myForm.controls["dropdown"].setValue("pizza-1");

或者使用 patchValue 时：

this.myForm.patchValue({dropdown: 'pizza-1'});

也就是说，若要以编程方式更改选择列表的值，应基于id而不是对象本身。

接下来是确保自定义控件中writeValue()方法：

writeValue(val: string): void {
this.selectedOption = val;
}

最后，将selectedOption(或innerValue(绑定到mat-select标记：

<mat-select placeholder="Favorite food" [(ngModel)]="selectedOption">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>

无需更改应用程序组件 html 中的任何内容。它仍将使用反应式形式：

<app-input-dropdown [foods]="foods" formControlName="dropdown">
</app-input-dropdown>

如果您仍然遇到问题，我可以在 Stackblitz 中提供一个示例。请告诉我。