Как создать список флажков в Angular, связанных с ngModel и другими параметрами, полученными из JSON
Я работаю над Ангуляром. Я сделал список флажков с определенным значением ngModel для каждого флажка. Для этого я создал JSON в файле компонента TS. JSON выглядит так:
test = [
{id: 'model1', site: '1', label: 'Clocher', view: 'file_clocher'},
{id: 'model2', site: '1', label: 'Moulin', view: 'file_moulin'},
{id: 'model3', site: '1', label: 'Poisson', view: 'file_poisson'},
{id: 'model4', site: '2', label: 'Lacs', view: 'file_lac'},
{id: 'model5', site: '2', label: 'Relais', view: 'file_relais'},
{id: 'model6', site: '3', label: 'Citadelle', view: 'file_citadelle'},
]
В файле HTML есть следующий «код флажка»:
<div *ngFor = "let j of test">
<div *ngIf = "j.site == '1'" class = "form-check">
<input class = "form-check-input" type = "checkbox" [(ngModel)] = "j.id" (change) = "displayData($event)" name = "{{j.view}}"/>
<label class = "form-check-label">{{j.label}}</label>
</div>
</div>
displayData($event) должен позволить мне проверить параметр name флажка.
Итак, в моем файле TS я указал ...
displayData(event: any){
console.info(event.target.name);
}
... и console.info должен получить, например, «file_clocher», если я поставлю первый флажок.
Но на самом деле у меня две проблемы:
- Все галочки уже установлены, что удивительно
- Когда я устанавливаю первый флажок, console.info возвращает «undefined», тогда как он должен возвращать, например, «file_clocher» (я пытаюсь сделать это вручную, без JSON, это работает)
Не подскажете, как это можно исправить?
Спасибо за вашу помощь.
Ответы 1
У вас есть несколько проблем: ngmodel для ввода — это фактическое значение для этого поля ввода, которое в случае флажка является логическим. Поскольку j.id определен, он имеет истинное значение, поэтому все они проверяются изначально. Вы, вероятно, хотите, чтобы другая переменная была определена для отслеживания того, проверяются ли эти входные данные.
вы должны иметь возможность установить имя с помощью [name]='j.view' или изменить функцию, чтобы просто передать имя представления с помощью (change) = "displayData(j.view)"
Вы можете добавить еще одно поле в свой объект «j», например test = [ {id: 'model1', site: '1', label: 'Clocher', view: 'file_clocher', value: false}, ..., а затем ссылаться на него на входе, например [(ngModel)] = "j.value"
Хорошо, отлично, все работает, все это начинает иметь для меня смысл! Последний вопрос, если осмелюсь... можно ли написать в файле TS что-то вроде j.value=false, если я хочу снять один из флажков с помощью ngModel? Еще раз спасибо!
Большой! Да, самое замечательное в двустороннем связывании в angular то, что вы можете обновлять свои модели в любом месте кода и видеть, как изменения отражаются на дисплее.
Отлично, я проверю это и сделаю несколько попыток! Спасибо за ссылку. Если то, что я попробую, не сработает, могу я задать вам еще один вопрос (надеюсь, последний)? :)
Хорошо, понял, после многих попыток мне наконец удалось сделать то, что я хотел. Большое спасибо за вашу помощь @Justin !!
Спасибо за Ваш ответ. Означает ли это, что я не должен добавлять ngModel? Если да, то как я могу указать, когда нужно снять флажок в файле TS (мне в этом помог ngModel).