Установите флажок Свойство флажка Тернарным Оператором В Angular 5

Question

В моем компоненте у меня есть флажок типа

<div class="checkbox checkbox-primary">
  <input id="approved" name="approval" type="checkbox" (change)="clickEvent($event)" 
    [checked]="Model.IsApproved =='Yes'?true:false">
    <label for="approved">Approved /label>
 </div>

IsApproved - свойство типа string в моей модели на стороне клиента, оно содержит либо Да, либо Нет.

Я хочу установитьэто проверено, если IsApproved равно Yes, в противном случае не проверено.

Я пробовал ниже Комбинация

[checked]="IsApproved ===Yes?'true':'false'"

[checked]="IsApproved ==Yes?'true':'false'"

[checked]="IsApproved =='Yes'?true:false"

[checked]="{{IsApproved ===Yes?'true':'false'}}"

Но, похоже, здесь ничего не работает, возможно ли это с троичным оператором?

Answer 1

TS

public isChecked:boolean

В зависимости от условия присваивает значение true или false

HTML

<label>Checkbox</label>
<input type="checkbox" [checked]="isChecked" />

Answer 2

Просто используйте это

[checked]="Model.IsApproved =='Yes'"

Все еще не работает?

Вы можете устранить проблему с помощью -

1. Вы получаете любую неопределенную ошибку?Если нет, то перейдите к следующим шагам, иначе проверьте наличие ошибки.
2. Является ли Model объектом, на который вы хотите сослаться?
3. Является ли свойство IsApproved name правильным?
4. Является ли свойство IsApproved значением "Да" или "Нет"
5. Проверьте значение с учетом регистра.Это Yes или yes или YES.

Вот и все.

Answer 3

Если вы введете

[checked]="Model.IsApproved.toLowerCase() === 'yes'

, он вернет истину или ложь, вам вообще не нужна троичная операция

Answer 4

Я создал рабочий стек-блиц для визуализации ответа.

Как уже сказано в комментариях [checked]="Model.IsApproved === 'Yes' ? true : false" - правильный синтаксис.Похоже, ваш Model.IsApproved настроен неправильно.Я устанавливаю это, используя [(ngModel)] внутри input с type="text":

Компонент:

Model = {
    IsApproved: ''
};

Вид:

<input type="text" name="approved" [(ngModel)]="Model.IsApproved">

<div class="checkbox checkbox-primary">
  <input id="approved" name="approval" type="checkbox" (change)="clickEvent($event)" [checked]="Model.IsApproved === 'Yes' ? true : false">
  <label for="approved">Approved</label>
</div>

Введите Yes вприведенный выше ввод и посмотреть, как он работает.Удачи!