Javascript 在“选择”选项中选择会给出错误的属性值

我想显示一个带有我的枚举的所有选项的select，并更改该值以更新我的数据库。 为此： 我有一个枚举：

export enum SubscriptionEnum {
    DAILY= 'DAILY',
    ANNUAL= 'ANNUAL',
    HALF-YEARLY = 'HALF-YEARLY ',
    QUARTERLY = 'QUARTERLY ',
    MONTHLY = 'MONTHLY ',
}

在我的.ts文件中，我创建了我的枚举变量：

SubscriptionEnum = SubscriptionEnum ;

然后在my.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>

{{client.subscription}
//这里它显示在my db中注册的内容，在本例中为“年度”
订阅：
{{option.value}}

这个例子给出了select with all选项，以及当我单击一个新选项时视图页面中的值更改

然后，我在select中添加（change）以调用一个方法，该方法更改数据库中客户端订阅的内容。我是这样做的： .html：

{{client.subscription}
//这里它显示在my db中注册的内容，在本例中为“年度”
订阅：
{{option.value}}

在我的changeInfo中，我发送事件并获取event.id和event.value来更新我的数据库，它可以工作，因为当我单击select选项时，它会更改，而作为我的数据库值的

{{client.subscription}

会获取正确的值

然后我想添加一个选择器，让我的选项值直接取好的值，但这不起作用。。。 我这样加上：

<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>

{{client.subscription}
//这里它显示在my db中注册的内容，在本例中为“年度”
订阅：
{{option.value}}

这会突出显示我的句子并告诉我“错误的属性方法”，当我重新加载页面时，我的div包含良好的值，即“年度”，但我的选项等于季度。如果单击以更改选项，良好值将保存在我的数据库中，但我的选择选择器的显示将错误

---

我不明白什么？感谢您的帮助

两个相似的角度语法之间有细微的区别：

selected="{{option.key == client.subscription}}"

及

有两个属性绑定，但前者为属性指定插值

这意味着即使在错误值的情况下，

所选

属性也将得到

真

el.selected = 'false'

因为

string

在js中是一个真实的值

<>你可以考虑以下选项：

• 使用正确的属性绑定：

   [selected]="option.key == client.subscription"
  

   <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>
  

• 在
  标记上使用

  值

  绑定：

   [selected]="option.key == client.subscription"
  

   <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>
  

  
  {{option.value}{{option.key==client.subscription}