[英]Can't set default selection property with ngmodel on Angular 9
I'm trying to create a select
with a default value on Angular 9. I need two-way-binding, because the value selected must instantly be displayed in an element next to the selection.我正在尝试使用 Angular 9 上的默认值创建
select
。我需要双向绑定,因为选择的值必须立即显示在选择旁边的元素中。 I've tried everything, from using Angular Material's implementation of option to normal selection boxes, but I can't seem to set the default selection.我已经尝试了一切,从使用 Angular Material 的选项实现到普通选择框,但我似乎无法设置默认选择。
I need to control the selected element with the isSelected
on [selection]
, but everything I've tried will display a blank selection box.我需要使用
[selection]
上的isSelected
来控制所选元素,但是我尝试过的所有内容都将显示一个空白选择框。
The select itself is as follows: select本身如下:
<select [(ngModel)]="selectedPrice">
<option *ngFor="let value of values" [ngValue]="value.propertyName" [selected]="value.isSelected == true"> {{value.str}} </option>
</select>
The array is:数组是:
values = [{ str: 'Varejo 1', propertyName: 'varejo1', isSelected: true, },
{ str: 'Varejo 2', propertyName: 'varejo2', isSelected: false },
{ str: 'Varejo 3', propertyName: 'varejo3', isSelected: false },
{ str: 'Atacado 1', propertyName: 'atacado1', isSelected: false },
{ str: 'Atacado 2', propertyName: 'atacado2', isSelected: false },
]
The component is:组件是:
export class ProductDialogComponent implements OnInit {
selectedPrice: number;
values = [{ str: 'Varejo 1', propertyName: 'varejo1', isSelected: true, },
{ str: 'Varejo 2', propertyName: 'varejo2', isSelected: false },
{ str: 'Varejo 3', propertyName: 'varejo3', isSelected: false },
{ str: 'Atacado 1', propertyName: 'atacado1', isSelected: false },
{ str: 'Atacado 2', propertyName: 'atacado2', isSelected: false },
];
constructor(
public dialogRef: MatDialogRef<MomfortProductsTableComponent>,
@Inject(MAT_DIALOG_DATA) public product: MomfortProduct) {
}
ngOnInit(): void {
}
onNoClick(): void {
this.dialogRef.close();
}
}
I currently get this:我目前得到这个:
How would I make it so my [selected]
condition works?我将如何做到这一点,以便我的
[selected]
条件有效?
You can just assign a value to selectedPrice
:您可以为
selectedPrice
分配一个值:
In your component.ts
:在您的
component.ts
中:
this.selectedPrice = this.values.find(({ isSelected }) => isSelected ).propertyName;
or if you directly want to give it a static value:或者如果你直接想给它一个 static 值:
this.selectedPrice = 'varejo1'
update更新
Use selectedPrice: String
使用
selectedPrice: String
and the select element can be: select 元素可以是:
<select [(ngModel)]="selectedPrice">
<option *ngFor="let value of values" [ngValue]="value.propertyName">{{value.str}}</option>
</select>
You already have two-way binding because of [(ngModel)]="selectedPrice"
whenever you want to access the value of the selected option in your component.ts
just use this.selectedPrice
.您已经有了双向绑定,因为
[(ngModel)]="selectedPrice"
每当您想访问component.ts
中选定选项的值时,只需使用this.selectedPrice
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.