Я хотел бы добавить кнопку удаления в свое приложение Angular
У меня есть приложение Angular, я хотел бы добавить кнопку удаления для элемента div, в настоящее время у меня есть кнопка добавления, которая выглядит следующим образом:
тс файл.
uploads = [];
addUp() {
this.uploads.push(this.uploads.length);
}
я пытался
removeUp() {
this.uploads.remove(this.uploads.length);
}
Этот код связан с этой кнопкой следующим образом:
<button class = "btn" (click) = "addUp()">Add</button>
HTML
<div class = "col" *ngFor = "let upload of uploads">
<h2>Upload</h2>
</div>
Как мне удалить версию?
Сначала, может быть, прочитать о массивах Javascript?: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
@rob: Пожалуйста, дайте отзыв, если какой-то ответ сработал или вы нашли другое решение. Спасибо за ваше обновление!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Если я правильно понял, вы пытаетесь добиться той же реализации кнопки, но для метода удаления.
Использование: <button class = "btn" (click) = "removeUp()">Remove</button>
А также измените метод removeUp, чтобы использовать splice вместо remove:
removeUp() {
this.uploads.splice(this.uploads.length, 1)
}
Посмотрите ответ на аналогичный вопрос здесь Аналогичный вопрос
Спасибо, Александрос, но этот код в файле TS не работает для удаления элемента.
Итак, ваша проблема заключается в методе removeUp. Что вы пытаетесь удалить? Последний элемент списка загружается?
Проверьте новый отредактированный ответ. Дополнительный HTML-код, который вы отредактировали с помощью ngFor, верен, но я вижу, что вы не используете этот upload объект списка. Вы просто показываете Element как текст h2. Разве вы не должны использовать его?
Уважаемый @rob, пожалуйста, всегда сообщайте нам, ЧТО и КАК что-то не работает (т.е. включая: консольный вывод, сообщение об ошибке, трассировку стека и т. д.). Тогда мы сможем быстрее проанализировать и решить ее напрямую.
Хорошо, hc_dev сделает в следующий раз
Итак, нажатие кнопки удаления не удаляет последний элемент? Если бы была репродукция или репозиторий на github, мы могли бы изучить его более подробно. Подумайте о том, чтобы сделать - поделиться одним. Вы можете использовать codepen или что-то подобное с угловым пакетом.
@AlexandrosMarkovits Вы тестировали свой код ;-) Использование длина в качестве аргумента старт/индекс для splice приведет к ничего не удалять. Я тоже думал, что перевернется. Но только начальный индекс > длина будет фактически равен 0, а отрицательный старт/индекс будет отсчитываться от последнего элемента.
Нет, я не думал, что что-то подобное может произойти. Хотя я должен сказать, что вставлять или объединять длину массива в массив как элемент довольно странно. Хорошая работа по поиску решения.
Вы не можете использовать функцию remove для удаления элемента из массива.
соединение для удаления объекта из массива
Чтобы удалить элемент из массива, вы должны использовать соединение:
removeUpload(uploadItem) {
// get index/position of uploadItem within array
const index: number = this.uploads.indexOf(uploadItem);
// if index returned is negative it means element not found in array
// else: (positive) index can be used
// e.g. to remove the single element at this position
if (index !== -1) {
this.uploads.splice( index, 1 );
}
}
Это удаляет из позиции индекса ровно один элемент (таким образом, второй аргумент здесь 1).
Конечно, вы должны добавить аргумент upload в качестве аргумента к событию нажатия кнопки, чтобы функция знала, какой элемент массива она должна удалить:
<button class = "btn" (click) = "removeUpload( upload )" title = "remove this">x</button>
См. демо на stackblitz.
Ярлыки
Если вы хотите удалить элемент первый из массива, используйте array.сдвиг(). Если вы хотите удалить элемент последний из массива, используйте array.поп(). Обе функции возвращают удаленный элемент.
Что добавить/удалить из массива?
Я не уверен, почему вы добавляете/удаляете (push соответствующий splice) длину массива в массив uploads. Сохраняет ли массив текущий размер самого себя или, скорее, upload-item-objects?
Смотрите также
A: удалить элемент из сохраненного массива в angular 2
Загрузки будут вводом, куда вы загружаете файлы. Пока это просто тег <h2>, но концепция такая же, как добавление и удаление элемента.
Эта кнопка удаления не сработала - в консоли нет ошибок
@rob Извините, я исправил мой код splice(uploadItem,1), должно быть splice(index, 1), как вы уже узнали. И добавил кнопку-HTML. Найдите ссылку на полная демонстрация.
Не могли бы вы показать нам, что вы пробовали?