富國滬深
2023-04-14 16:31:27
我想顯示一個(gè)包含我的枚舉所有選項(xiàng)的選擇并更改值以更新我的數(shù)據(jù)庫。為此:我有一個(gè)枚舉:export enum SubscriptionEnum { DAILY= 'DAILY', ANNUAL= 'ANNUAL', HALF-YEARLY = 'HALF-YEARLY ', QUARTERLY = 'QUARTERLY ', MONTHLY = 'MONTHLY ',}在我的 .ts 文件中,我創(chuàng)建了我的枚舉變量:SubscriptionEnum = SubscriptionEnum ;然后我在我的 .html 中顯示該選項(xiàng):<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>當(dāng)我單擊一個(gè)新選項(xiàng)時(shí),此示例為我提供了帶有所有選項(xiàng)的選擇以及視圖頁面中的值更改。然后,我在 select 中添加 (change) 以調(diào)用一個(gè)方法來更改數(shù)據(jù)庫中客戶端訂閱的內(nèi)容。我是這樣做的: .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>在我的 changeInfo 中,我發(fā)送了事件并使用 event.id 和 event.value 來更新我的數(shù)據(jù)庫,它之所以有效,是因?yàn)楫?dāng)我單擊它時(shí)選擇選項(xiàng)發(fā)生了變化,而這是<p>{{client.subscription}}</p>我的數(shù)據(jù)庫的一個(gè)值具有良好的價(jià)值。然后我想添加一個(gè)選擇器,以便我的選項(xiàng)值直接采用好的值,這是行不通的……我這樣添加:<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>這給我突出顯示我的句子并告訴我“錯(cuò)誤的屬性方法”,當(dāng)我重新加載我的頁面時(shí)div 包含“ANNUAL”的良好價(jià)值,但我的選擇等于 QUARTERLY。如果我單擊更改選項(xiàng),好的值將保存在我的數(shù)據(jù)庫中,但我的選擇器的顯示將是錯(cuò)誤的。我不明白什么?感謝您的幫助
1 回答

紅糖糍粑
TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊
兩種相似的 Angular 語法之間存在細(xì)微差別:
selected="{{option.key == client.subscription}}"
和
[selected]="option.key == client.subscription"
有兩種屬性綁定,但前者將內(nèi)插值分配給屬性。
這意味著即使在虛假值的情況下,selected
屬性也會(huì)得到true
;
el.selected = 'false'
因?yàn)?code>string是 js 中的真值。
因此,您可以考慮以下選項(xiàng):
使用正確的屬性綁定:
[selected]="option.key == client.subscription"
改用
value
標(biāo)簽綁定<select>
:
<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>
添加回答
舉報(bào)
0/150
提交
取消