Поднимите Mat-Table до крайности - Комплексное руководство по Mat-Table с Роном Свенсоном
Добро пожаловать,
В этой статье мы рассмотрим полный пример того, как использовать Angular и Angular Material для создания электронной таблицы.
Мы расскажем, как создать проект angular, как удалить столбец или строку и создать трекер ячеек таблицы, такой как Microsoft Office Excel. Однако прежде чем я начну, я хотел бы представиться. Я Махмуд Х. Алнассер, студент старшего курса информатики. Я начал работать с Query.AI несколько месяцев назад. Query.AI - это приложение с поддержкой искусственного интеллекта, которое предоставляет ответы и аналитику на основе ИТ-данных, хранящихся в журналах и платформах SIEM, таких как Splunk и Elasticsearch. Моя первая задача, которую поручил мне Дхирадж Шаран, - создать электронную таблицу, и я хотел бы поделиться своим опытом со всеми.
Я выбрал Рона Свансона в качестве темы для своего поста, потому что я объясню, как реализовать электронную таблицу, как можно меньше говоря.
СОДЕРЖАНИЕ
В этом посте мы рассмотрим следующие темы:
- Создайте проект фреймворка Angular.
- Настроить угловой материал.
- Создать таблицу данных материалов.
- Удалить функциональные возможности столбца и строки.
- Создайте функциональные возможности столбца и строки.
- Реализуйте встроенное редактирование ячеек.
НАЧАТЬ 🏋
Я предполагаю, что у вас уже установлены Nodejs и Angular. Если не! Иди и приготовь все. Остальные пойдут за чашками кофе. Когда будете готовы, запустите эту команду.
Теперь у вас готов проект на Angular!
Запустите эту команду, чтобы запустить свой проект: http: // localhost: 4200 /
Наш проект пустой, печальный, а главное, нет таблицы. Позвольте изменить этот факт. ✊ Пришло время добавить в проект материал Angular.
ДАВАЙТЕ ЭТО 🤸
Чтобы добавить в проект Angular Material, вы можете использовать инструмент командной строки npm или yarn для установки пакетов.
Мы будем использовать только компонент мат-стол. Если вы еще не знакомы с Компонентом мат-стола. Я рекомендую вам ознакомиться с ним, прежде чем двигаться дальше.
👩💻 Давайте начнем писать коды 👨💻
ПРИМЕЧАНИЕ. Я тоже все еще учусь. Не стесняйтесь помочь мне. 🚦
- Начните с изменения app.module.ts
2. Используйте значки материалов, добавив эту строку в свой index.html.
3. Создайте данные
4. Импортируйте необходимые библиотеки в app.component.ts.
5. Определите переменную для имени заголовков и другую для источника данных.
После этого шага app.component.ts должен выглядеть так:
6. Пришло время написать немного HTML.
Начните с удаления всего внутри app.component.html, а затем введите это! О нет, не копируйте это… НАБИРАЙТЕ ЕГО.
7. Добавьте немного стиля.
У вас должно получиться что-то вроде этого. Выглядит некрасиво, но подойдет! 🎆
Теперь мы реализуем функцию удаления или добавления строки или столбца. Я впервые столкнулся с трудностями в реализации этого, и я не хочу, чтобы кто-то еще страдал. Итак, начнем.
Начнем с реализации функции удаления столбца. 🏇
Чтобы удалить заголовок, нам нужно удалить конкретный заголовок из displayColumns, удалить все данные, связанные с этим заголовком, и изменить имена заголовков. Если мы решим удалить первый заголовок, например:
Я начну с добавления кнопок в каждый заголовок и строку:
Алгоритм, который я разработал для удаления функциональности заголовка:
Если вы реализуете это правильно, ваша электронная таблица должна выглядеть так:
Теперь давайте добавим функциональность строки:
Мы можем добавить строку слева или справа. Я добавлю только строку слева, потому что:
Чтобы добавить заголовок, нам нужно добавить заголовок слева от заголовка, который мы щелкнули в DisplayColumns, добавить новую ячейку в каждый заголовок и изменить имена заголовков. Если мы решим добавить заголовок слева от первого заголовка, например:
Алгоритм, который я разработал для добавления функциональности заголовка:
Если вы реализуете это правильно, ваша электронная таблица должна выглядеть так:
Теперь, когда мы полностью закончили работу с заголовками. Пришло время поработать с функциями строк:
Начнем с добавления строки:
Чтобы удалить строку, мы удаляем всю строку из нашего источника данных. например, если мы решим удалить вторую строку:
Алгоритм, который я разработал для удаления функциональности строки:
Если вы реализуете это правильно, ваша электронная таблица должна выглядеть так:
Теперь давайте реализуем функцию добавления строк:
Алгоритм, который я разработал для удаления функциональности строки:
Если вы реализуете это правильно, ваша электронная таблица должна выглядеть так:
Поздравляю! Вы заканчиваете 90 процентов учебника:
Пора реализовать встроенное редактирование ячеек.
Будет использовать объект, чтобы контролировать, какую ячейку нужно переключить в режим редактирования:
Начните изменять HTML:
Также добавьте функциональный переключатель на вход:
Если вы реализуете это правильно, ваша электронная таблица должна выглядеть так:
Теперь электронная таблица готова! Я оставлю тебе одно задание. Вы можете использовать Hostlistener, чтобы реализовать Excel как непосредственно редактируемую таблицу с перемещением.
до свидания
