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

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

messageSelected($event, index) {
  console.log($event.target.checked);
  console.log(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.log(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
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

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