Я работаю над приложением Angular 5 с флажком. У меня есть данные, поступающие из базы данных, а затем сопоставлены с объектом javaScript. Я пытаюсь настроить значение «Выбрано», но не могу этого сделать. В моем результате у меня были отмечены все флажки, которые должны быть.
в следующем коде option: [] -> 'optionSelected' определяется, если выбрано значение true или false,
полученная схема выглядит следующим образом;
<div *ngSwitchCase = "'checkbox'"> <small>checkbox</small>
<div *ngFor = "let opt of question.options" >
<label class = "container-vertical"> {{opt.value}}
<input type = "checkbox" [formControlName] = "question.key" [name] = "opt.name" [value] = "opt.key" [checked] = "opt.optionSelected" />
<span class = "checkmark2"></span>
</label>
</div>
</div>
также пробовал с ngModel, как в моем компоненте, свойство 'value' содержит идентификатор выбранного ключа, но все же окончательный результат проверяет все поля
<input type = "checkbox" [formControlName] = "question.key" [name] = "opt.name" [value] = "opt.key" [(ngModel)] = "question.value" />
else if (questionElementType= = "checkbox")
{
let _checkBox = new CheckBoxQuestion ({
consultationId: questionsList[key].consultationId,
questionId: questionsList[key].questionId,
questionElementType: questionsList[key].questionElementType[0].title,
questionType: questionsList[key].questionType,
title:questionsList[key].title,
displayId: questionsList[key].displayId,
key: questionsList[key].questionId,
value: questionsList[key].answer.length<=0? null : questionsList[key].answer[0].answerValue.toLowerCase(),
label: questionsList[key].title,
order: 7,
options: questionsList[key].answerOptions.map(function(item){
return {"name": item.ReferenceKey, "key": item.preDefineAnswerOptionId, "value": item.text, "optionSelected": item.preDefineAnswerOptionId==questionsList[key].answer[0].answerValue? "true": "false"}
}),
});
this.mappedQuestions.push(_checkBox);
}
Если вы хотите, чтобы этот флажок был снят, его привязка к [value]
должна быть фальшивой.
И "true"
, и "false"
не являются пустыми строками, что означает, что они оцениваются как true
.
Преобразуйте "false"
в false
, и он будет работать должным образом.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<input type = "checkbox" [(ngModel)] = "checkbox1" /> "true"
<input type = "checkbox" [(ngModel)] = "checkbox2" /> "false"
<input type = "checkbox" [(ngModel)] = "checkbox3" /> true
<input type = "checkbox" [(ngModel)] = "checkbox4" /> false
`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
checkbox1 = 'true';
checkbox2 = 'false';
checkbox3 = true;
checkbox4 = false;
}
Вы можете использовать это
<input type = "checkbox" [(ngModel)] = "active" [checked] = "true"
(change) = "isAactiveChange($event)" >
Рад, что смог помочь :)