Блог

Я хочу отобразить выбор со всеми параметрами моего перечисления и изменить значение для обновления моей базы данных. Для этого: у меня есть перечисление:

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

В моем файле .ts я создаю свой enum var:

 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>
  

В этом примере я выбираю опцию «Выбрать со всеми» и изменяю значение на странице просмотра, когда я нажимаю на новую опцию.

Затем я добавляю (изменение) в select для вызова метода, который изменяет содержимое клиентской подписки в БД. Я сделал это так: .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 содержит хорошее значение, которое является «ГОДОВЫМ», но мой вариант равен КВАРТАЛЬНОМУ. Если я нажму, чтобы изменить параметр, правильное значение будет сохранено в моей базе данных, но отображение моего селектора выбора будет неправильным.

Чего я не понимаю? Спасибо за вашу помощь

Существует тонкая разница между двумя похожими угловыми синтаксисами:

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

и

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

Существуют обе привязки свойств, но первая присваивает свойству интерполированное значение.

Это означает, что даже в случае ложных значений selected свойство получит true ;

 el.selected = 'false'
  

потому string что это истинное значение в js.

Таким образом, вы можете рассмотреть следующие варианты:

• Используйте правильную привязку свойства:

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

• Вместо этого используйте value привязку к <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>