角度材质: 垫子-选择不选择默认

我有一个 mat-select，其中的选项都是数组中定义的对象。我试图设置的值默认为其中一个选项，但它是左选择时，页面呈现。

我的打印文件包含:

  public options2 = [
{"id": 1, "name": "a"},
{"id": 2, "name": "b"}
]
public selected2 = this.options2[1].id;

我的 HTML 文件包含:

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

我尝试过将 mat-option中的 selected2和 value同时设置为对象和它的 id，并尝试过在 mat-select中同时使用 [(value)]和 [(ngModel)]，但都不起作用。

我正在使用的材料版本2.0。0-beta.10

376629 次浏览
小开
最佳答案

对模板中的值使用绑定。

value="\{\{ option.id }}"

应该是

[value]="option.id"

在您选择的值中使用 ngModel而不是 value。

<mat-select [(value)]="selected2">

应该是

<mat-select [(ngModel)]="selected2">

完整代码:

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

在 版本2.0.0-beta 版本12的旁注中，材料选择现在接受一个 mat-form-field元素作为父元素，因此它与其他材料输入控件是一致的。升级后，将 div元素替换为 mat-form-field元素。

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

您应该在 mat-option中将其绑定为 [value]，如下所示,

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

现场演示

小开

我使用角度5和反应形式与垫选择，无法得到上述任何解决方案显示初始值。

我必须添加[ compareWith ]来处理 mat-select 组件中使用的不同类型。在内部，似乎 mat-select 使用一个数组来保存选定的值。如果启用了多个选择，则可能允许相同的代码处理多个选择。

角度选择控制文件

我的解决办法是:

窗体生成器来初始化窗体控件:

this.formGroup = this.fb.group({
country: new FormControl([ this.myRecord.country.id ] ),
...
});

然后在组件上实现 compareWith 函数:

compareIds(id1: any, id2: any): boolean {
const a1 = determineId(id1);
const a2 = determineId(id2);
return a1 === a2;
}

接下来，创建并导出一个 configeId 函数(我必须创建一个独立函数，以便 mat-select 可以使用它) :

export function determineId(id: any): string {
if (id.constructor.name === 'array' && id.length > 0) {
return '' + id[0];
}
return '' + id;
}

最后将 compareWith 属性添加到 mat-select:

<mat-form-field hintLabel="select one">
<mat-select placeholder="Country" formControlName="country"
[compareWith]="compareIds">


<mat-option>None</mat-option>
<mat-option *ngFor="let country of countries" [value]="country.id">
\{\{ country.name }}
</mat-option>
</mat-select>
</mat-form-field>
小开

使用 compareWith函数将选项值与所选择的值进行比较。参见此处: https://material.angular.io/components/select/api#MatSelect

对于下列结构的物体:

listOfObjs = [{ name: 'john', id: '1'}, { name: 'jimmy', id: '2'},...]

像这样定义标记:

<mat-form-field>
<mat-select
[compareWith]="compareObjects"
[(ngModel)]="obj">
<mat-option  *ngFor="let obj of listOfObjs" [value]="obj">
\{\{ obj.name }}
</mat-option>
</mat-select>
</mat-form-field>

并定义如下比较函数:

compareObjects(o1: any, o2: any): boolean {
return o1.name === o2.name && o1.id === o2.id;
}
小开

试试这个！

this.selectedObjectList = [{id:1}, {id:2}, {id:3}]
this.allObjectList = [{id:1}, {id:2}, {id:3}, {id:4}, {id:5}]
let newList = this.allObjectList.filter(e => this.selectedObjectList.find(a => e.id == a.id))
this.selectedObjectList = newList
小开

我的解决方案有点棘手，也比较简单。

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

我只是利用了 占位符。材质占位符的默认颜色是 light gray。为了让它看起来像是选中了这个选项，我只是按照如下方式操作 CSS:

::ng-deep .mat-select-placeholder {
color: black;
}
小开

正如在 Angular 6中已经提到的，使用反应形式的 ngModel 是不推荐的(在 Angular 7中删除) ，因此我修改了模板和组件，如下所示。

模板:

<mat-form-field>
<mat-select [formControl]="filter" multiple
[compareWith]="compareFn">
<mat-option *ngFor="let v of values" [value]="v">\{\{v.label}}</mat-option>
</mat-select>
</mat-form-field>

组件的主要部分(略去 onChanges和其他细节) :

interface SelectItem {
label: string;
value: any;
}


export class FilterComponent implements OnInit {
filter = new FormControl();


@Input
selected: SelectItem[] = [];


@Input()
values: SelectItem[] = [];


constructor() { }


ngOnInit() {
this.filter.setValue(this.selected);
}


compareFn(v1: SelectItem, v2: SelectItem): boolean {
return compareFn(v1, v2);
}
}


function compareFn(v1: SelectItem, v2: SelectItem): boolean {
return v1 && v2 ? v1.value === v2.value : v1 === v2;
}

注意上面 ngOnInit中的 SetValue (this. select)。

似乎在角度6有效。

小开

我的解决办法是:

<mat-form-field>
<mat-select #monedaSelect  formControlName="monedaDebito" [attr.disabled]="isLoading" [placeholder]="monedaLabel | async ">
<mat-option *ngFor="let moneda of monedasList" [value]="moneda.id">\{\{moneda.detalle}}</mat-option>
</mat-select>

TS:

@ViewChild('monedaSelect') public monedaSelect: MatSelect;
this.genericService.getOpciones().subscribe(res => {


this.monedasList = res;
this.monedaSelect._onChange(res[0].id);




});

使用 object: { id: number，detalle: string }

小开

您可以简单地实现自己的比较函数

[compareWith]="compareItems"

所以完整的代码应该是这样的:

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

以及打字稿档案:

  compareItems(i1, i2) {
return i1 && i2 && i1.id===i2.id;
}
小开

就像这些例子一样。试图将 mat-select 的值设置为其中一个 mat-options 的值。但失败了。

我的错误是对一个数值类型变量执行[(value)] = “ somNumbervariable”，而 mat-options 中的变量是字符串。即使它们在模板中看起来相同，它也不会选择该选项。

一旦我解析了一个字符串的一些数字变量一切都是完全没有问题的。

因此，似乎您需要的 mat-select 和 mat-option 值不仅是相同的数字(如果您呈现的是数字) ，而且还应该是字符串类型的。

小开

数字和字符串之间的比较使用 false ，因此，将您选择的值强制转换为 ngOnInit 中的字符串，它就会正常工作。

我遇到了同样的问题，我用枚举填充了 mat-select，使用

Object.keys(MyAwesomeEnum).filter(k => !isNaN(Number(k)));

我得到了我想要选择的枚举值。

我花了几个小时在脑子里挣扎，试图找出它为什么不起作用。我只是在渲染了所有在 mat-select 中使用的变量、键集合和选中的... 如果你有[“0”，“1”，“2”]并且你想选择1(这是一个数字) 1 = = “1”为 false，因此没有选择任何内容。

因此，解决方案是 ngOnInit 中的 将所选值强制转换为字符串，它将工作。

小开

绑定或设置默认值只有在 MatSelect上的 价值属性与绑定到 MatOption的 价值属性相当时才起作用。如果将项目的 caption绑定到 垫子选择元素的 价值属性，则必须将项目的 caption0上的默认元素也设置为 caption。如果将项目的 Id绑定到 垫子选择，则必须将 id也绑定到 caption0，而不是整个项目、标题或任何其他内容，只绑定相同的字段。

但是你需要通过绑定[]来实现

小开

是我干的。

<div>
<mat-select [(ngModel)]="selected">
<mat-option *ngFor="let option of options"
[value]="option.id === selected.id ? selected : option">
\{\{ option.name }}
</mat-option>
</mat-select>
</div>

通常您可以执行 [value]="option"，除非您从某个数据库获得选项? ? ？我认为要么是获取数据的延迟导致它无法工作，要么是获取的对象在某种程度上不同，尽管它们是相同的? ？ 奇怪的是，它很可能是后一个，因为我也尝试了 [value]="option === selected ? selected : option"，它不工作。

小开

我非常仔细地遵循上面的步骤，但仍然不能得到选中的初始值。

原因是，虽然我的绑定值在类型脚本中定义为字符串，但我的后端 API 返回的是一个数字。

Javascript 松散类型只是在运行时更改了类型(没有错误) ，这阻止了对初始值的选择。

组件

myBoundValue: string;

模板

<mat-select [(ngModel)]="myBoundValue">

解决方案是更新 API 以返回字符串值。

小开

实现这一点的一个非常简单的方法是使用具有默认值的 formControl，例如在 FormGroup(可选)内部。这是一个将单位选择器用于区域输入的例子:

这个

H_AREA_UNIT = 1;
M_AREA_UNIT = 2;


exampleForm: FormGroup;


this.exampleForm = this.formBuilder.group({
areaUnit: [this.H_AREA_UNIT],
});

Html

<form [formGroup]="exampleForm">
<mat-form-field>
<mat-label>Unit</mat-label>
<mat-select formControlName="areaUnit">
<mat-option [value]="H_AREA_UNIT">h</mat-option>
<mat-option [value]="M_AREA_UNIT">m</mat-option>
</mat-select>
</mat-form-field>
</form>
小开

TS

   optionsFG: FormGroup;
this.optionsFG = this.fb.group({
optionValue: [null, Validators.required]
});


this.optionsFG.get('optionValue').setValue(option[0]); //option is the arrayName

超文本标示语言

   <div class="text-right" [formGroup]="optionsFG">
<mat-form-field>
<mat-select placeholder="Category" formControlName="optionValue">
<mat-option *ngFor="let option of options;let i =index" [value]="option">
\{\{option.Value}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
小开 

public options2 = [
{"id": 1, "name": "a"},
{"id": 2, "name": "b"}
]
 

YourFormGroup = FormGroup;
mode: 'create' | 'update' = 'create';


constructor(@Inject(MAT_DIALOG_DATA) private defaults: defautValuesCpnt,
private fb: FormBuilder,
private cd: ChangeDetectorRef) {
}
  

ngOnInit() {


if (this.defaults) {
this.mode = 'update';
} else {
this.defaults = {} as Cpnt;
}


this.YourFormGroup.patchValue({
...
fCtrlName: this.options2.find(x => x.name === this.defaults.name).id,
...
});


this.YourFormGroup = this.fb.group({
fCtrlName: [ , Validators.required]
});


}
  <div>
<mat-select formControlName="fCtrlName"> <mat-option
*ngFor="let option of options2"
value="\{\{ option.id }}">
\{\{ option.name }}
</mat-option>
</mat-select>
</div>

小开

我有问题在绑定第一选项，当页面加载。下面有帮助我的解决方案

Html

<mat-form-field appearance="outline">
<mat-select #teamDropdown
[ngModel]="selectedGroupId" (selectionChange)="selectedGroupId=$event.value">
<mat-option value=undefined>Please Select</mat-option>
<mat-option *ngFor="let grp of groups" [value]="grp.groupsId">
\{\{grp.groupName}}
</mat-option>
</mat-select>
</mat-form-field>

. ts

@ViewChild('teamDropdown') teamDropdown: MatSelect;
ngAfterViewInit() {
setTimeout(() => {
this.teamDropdown.options.first.select();
});
}
小开

唯一的解决方案是，您的窗体控件或 Mat select 标记中的 Ng Model 值必须与选项标记 中赋值的文本相匹配 T 档案

selectedFood = 'Tacos';

模板

    <mat-form-field appearance="fill">
<mat-label>Favorite Food</mat-label>
<mat-select [(value)]="selectedFood">
<mat-option value=''>---------</mat-option>
<mat-option value='Tacos'>Tacos</mat-option>
<mat-option value='Pizza'>Pizza</mat-option>
        

</mat-select>
</mat-form-field>
<p>You selected: \{\{selectedFood}}</p>

提交答案