Angular 2 Добавить или удалить элемент из массива

У меня есть этот метод:

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>

эй, я думаю, вы хотели использовать splice вместо slice

chiliNUT 26.10.2018 05:05

Спасибо, это сработало .... если вы хотите вставить в ответ, я принимаю его

user979331 26.10.2018 05:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
68
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Другие вопросы по теме