У меня есть этот метод:
messageSelected($event, index) {
console.info($event.target.checked);
console.info(index);
if ($event.target.checked) {
this.selectedMessages.push($event.target.getAttribute('name'));
}
else {
var item = this.selectedMessages.indexOf($event.target.getAttribute('name'), 0);
this.selectedMessages.slice(item, 1);
}
console.info(this.selectedMessages);
}
Я пытаюсь сделать, если элемент отмечен, добавить элемент в массив (эта часть работает), теперь я пытаюсь удалить элемент из массива, если отмечено значение false (эта часть не работает)
Проблема в том, что элемент не удаляется из массива. Что я делаю неправильно?
Вот мой HTML:
<div class = "card" *ngFor = "let i of userMessages; let item = index">
<div class = "card-body row-eq-height clearfix">
<div class = "col-sm-2 vertical-center text-center">
<div class = "avatar">
</div>
</div>
<div class = "col-sm-8 vertical-center xs-center-text">
<strong class = "username">Username</strong>
<p><a class = "read-more" [routerLink] = "['/singleMessage/' + i.id]">{{i.subject}}</a></p>
</div>
<div class = "col-sm-2 col-xs-6 clearfix">
<span class = "date">{{i.updated_at | date: 'MM/dd/yyyy'}}</span>
</div>
<div class = "col-sm-1 col-xs-6 text-right clearfix no-x-padding">
<div class = "custom-check pull-right">
<input type = "checkbox" id = "{{i.id}}" name = "{{i.id}}" (change) = "messageSelected($event, item)"/>
<label for = "{{i.id}}"></label>
</div>
</div>
</div>
</div>
Спасибо, это сработало .... если вы хотите вставить в ответ, я принимаю его
AngularJS привязывается к объекту массива, и функция кусочек в JS в результате создает новый массив, оставляя исходный массив таким, какой он есть.
Вы должны использовать сращивание (обратите внимание на p), который обновит массив.
Например:
var index = this.selectedMessages.indexOf($event.target.getAttribute('name'));
this.selectedMessages.splice(index, 1);
Помимо путаницы между slice
(не изменяющийся вариант) и splice
, похоже, что вы используете angular как vanilla js.
Вся идея использования подобного фреймворка состоит в том, чтобы избавиться от проверки / манипулирования DOM.
Вам не нужно перегружать <input name>
, вы можете напрямую вызвать messageSelected($event.target.checked, i.id)
(также изменив функцию фирмы, предоставив все необходимые данные).
Более того, вы можете использовать двустороннюю привязку [(ngModel)] = "selectedItems[i.id]"
для привязки checkbox
к карте (объекту) «выбранных элементов», а затем просто извлечь записи true
, сопоставив их с массивом.
Или, если вы не возражаете изменить объект i
, вы можете привязать ngModel
непосредственно к настраиваемому свойству, например [(ngModel)] = "i.selected"
.
Идея состоит в том, чтобы избежать ручного подключения change
и getAttribute('name')
.
Вот живой пример: https://codesandbox.io/s/rjxn1y84wm
эй, я думаю, вы хотели использовать
splice
вместоslice