[英]selected in select option give wrong attribute value
I want to display a select with all the option of my enum and change the value to update my database.我想用我的枚举的所有选项显示一个选择并更改值以更新我的数据库。 To do so: I have an enum:
这样做:我有一个枚举:
export enum SubscriptionEnum {
DAILY= 'DAILY',
ANNUAL= 'ANNUAL',
HALF-YEARLY = 'HALF-YEARLY ',
QUARTERLY = 'QUARTERLY ',
MONTHLY = 'MONTHLY ',
}
In my .ts file i create my enum var:在我的 .ts 文件中,我创建了我的枚举变量:
SubscriptionEnum = SubscriptionEnum ;
And then i display the option in my .html:然后我在我的 .html 中显示该选项:
<p>{{client.subscription}}</p> // here it display what is registered in my db, in this case "ANNUAL"
<label for="subscription">Subscription:</label>
<select #subscriptionid="subscription">
<option value="{{option.key}}"
*ngFor="let option of SubscriptionEnum | keyvalue">
{{option.value}}
</option>
</select>
This example give me the select with all option and the value change in the view page when i clicked on a new option.此示例为我提供了所有选项的选择以及当我单击新选项时视图页面中的值更改。
Then, i add the (change) in the select to call a method that change the content of the client subscription in the db.然后,我在选择中添加(更改)以调用更改数据库中客户端订阅内容的方法。 I did it like that: .html:
我是这样做的:.html:
<p>{{client.subscription}}</p> // here it display what is registered in my db, in this case "ANNUAL"
<label for="subscription">Subscription:</label>
<select (change)="changeInfo(subscription )" #subscription id="subscription">
<option value="{{option.key}}"
*ngFor="let option of SubscriptionEnum | keyvalue">
{{option.value}}
</option>
</select>
In my changeInfo i send the event and take the event.id and the event.value to update my db and it works because the select option change when i click on it and the <p>{{client.subscription}}</p>
that is a value of my db take the good value.在我的 changeInfo 中,我发送事件并使用 event.id 和 event.value 来更新我的数据库,它可以工作,因为当我点击它和
<p>{{client.subscription}}</p>
时选择选项会发生变化<p>{{client.subscription}}</p>
那是我的 db 的一个值,取好值。
Then i wanted to add a selector so my option value take directly the good value and this is not working ... I add it like that:然后我想添加一个选择器,所以我的选项值直接取好值,这不起作用......我这样添加:
<p>{{client.subscription}}</p> // here it display what is registered in my db, in this case "ANNUAL"
<label for="subscription">Subscription:</label>
<select (change)="changeInfo(subscription )" #subscription id="subscription">
<option value="{{option.key}}"
selected="{{option.key == client.subscription}}"
*ngFor="let option of SubscriptionEnum | keyvalue">
{{option.value}}
</option>
</select>
This give highlight me my sentence and tell me "Wrong attribute method" and when i reload my page my这给了我突出显示我的句子并告诉我“错误的属性方法”,当我重新加载我的页面时
div contains the good value which is "ANNUAL" but my option is equal to QUARTERLY. div 包含“ANNUAL”的好值,但我的选项等于 QUARTERLY。 If i click to change the option, the good value will be saved in my db but the display of my select selector will be wrong.
如果我单击更改选项,好的值将保存在我的数据库中,但我的选择器的显示将是错误的。
What do i not understand ?我不明白什么? Thank you for your help
感谢您的帮助
There is a subtle difference between two similar Angular syntaxes:两个相似的 Angular 语法之间存在细微的差别:
selected="{{option.key == client.subscription}}"
and和
[selected]="option.key == client.subscription"
There are both property bindings but the former assigns interpolated value to property.有两种属性绑定,但前者将内插值分配给属性。
It means that even in case of falsy values selected
property will get true
;这意味着即使在值为 false 的情况下,
selected
属性也将变为true
;
el.selected = 'false'
because string
is a truthy value in js.因为
string
是 js 中的真实值。
So you can consider the following options:因此,您可以考虑以下选项:
Use correct property binding:使用正确的属性绑定:
[selected]="option.key == client.subscription"
Use value
binding on <select>
tag instead:改为在
<select>
标签上使用value
绑定:
<select #subscription id="subscription" [value]="client.subscription"> <option value="{{option.key}}" *ngFor="let option of SubscriptionEnum | keyvalue"> {{option.value}} {{option.key == client.subscription}} </option> </select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.