在选择选项中选择给出错误的属性值

Question

我想显示一个包含我的枚举所有选项的选择并更改值以更新我的数据库。为此：我有一个枚举：

export enum SubscriptionEnum {

    DAILY= 'DAILY',

    ANNUAL= 'ANNUAL',

    HALF-YEARLY = 'HALF-YEARLY ',

    QUARTERLY = 'QUARTERLY ',

    MONTHLY = 'MONTHLY ',

}

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

SubscriptionEnum = SubscriptionEnum ;

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

当我单击一个新选项时，此示例为我提供了带有所有选项的选择以及视图页面中的值更改。

然后，我在 select 中添加 (change) 以调用一个方法来更改数据库中客户端订阅的内容。我是这样做的： .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 中，我发送了事件并使用 event.id 和 event.value 来更新我的数据库，它之所以有效，是因为当我单击它时选择选项发生了变化，而这是<p>{{client.subscription}}</p>我的数据库的一个值具有良好的价值。

然后我想添加一个选择器，以便我的选项值直接采用好的值，这是行不通的……我这样添加：

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

这给我突出显示我的句子并告诉我“错误的属性方法”，当我重新加载我的页面时

div 包含“ANNUAL”的良好价值，但我的选择等于 QUARTERLY。如果我单击更改选项，好的值将保存在我的数据库中，但我的选择器的显示将是错误的。

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

Answer 1

两种相似的 Angular 语法之间存在细微差别：selected="{{option.key&nbsp;==&nbsp;client.subscription}}"和[selected]="option.key&nbsp;==&nbsp;client.subscription"有两种属性绑定，但前者将内插值分配给属性。这意味着即使在虚假值的情况下，selected属性也会得到true；el.selected&nbsp;=&nbsp;'false'因为string是 js 中的真值。因此，您可以考虑以下选项：使用正确的属性绑定：&nbsp;[selected]="option.key&nbsp;==&nbsp;client.subscription"改用value标签绑定<select>：<select #subscription id="subscription" [value]="client.subscription">&nbsp; &nbsp;<option value="{{option.key}}"&nbsp; &nbsp; &nbsp; &nbsp;*ngFor="let option of SubscriptionEnum | keyvalue">&nbsp; &nbsp; &nbsp; &nbsp;{{option.value}} {{option.key == client.subscription}}&nbsp; &nbsp;</option>&nbsp;</select>