Вирішено: ngfor на ключах словника

Останнє оновлення: 09/22/2023
Автор: JavaScript SourceTrail

NgFor це вбудована директива в Angular, яка може бути неймовірно корисною, коли ви хочете перейти до ключів словника у файлі шаблону. Простіше кажучи, він використовується для перебору масиву або об’єкта прямо всередині шаблону. Angular надає надійну структуру, яка підтримує численні операції, включаючи зв’язування даних, маршрутизацію на основі компонентів, впровадження залежностей та багато інших. Тим не менш, щоб мати повний контроль над цими операціями, розробник повинен розуміти, як Angular їх обробляє.

Структура оператора ngFor така: *ngFor = “let item of items; index as i”. Де «items» — це ітерація, яка виконується в циклі, а «i» — індекс поточного елемента в ітерації.

Рішення використання NgFor на ключах словника

Angular не завжди пропонує рішення для використання ngFor на ключах словника. Однак є досить простий спосіб отримати бажаний результат. Один із підходів полягає у створенні масиву ключів, який потім можна повторити в DOM.

let dictionary = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
};
let keys = Object.keys(dictionary);

У файлі шаблону HTML ви можете використовувати *ngFor для повторення масиву ключів:

<div *ngFor="let key of keys">
  {{ key }}: {{ dictionary[key] }}
</div>

Покрокове пояснення коду

По-перше, нам потрібно знати, що таке об’єкт у JavaScript. Це сутність, яка містить невпорядковані дані в парі «ключ:значення». Метод Object.keys() повертає масив, що містить ключі перерахованих властивостей об’єкта. Ця операція виконується в цьому рядку коду:

let keys = Object.keys(dictionary);

У шаблоні HTML Angular *ngFor використовується для перебору цих ключів:

<div *ngFor="let key of keys">

Потім кожен ключ матиме доступ до пов’язаного значення в словнику за допомогою виразу «словник[ключ]».

Задіяні функції

  • Object.keys (): це метод JS, який повертає масив усіх перелічуваних властивостей об’єкта. При застосуванні до словника в цьому випадку він в основному надає ключі.
  • *ngFor: це структурна директива Angular, яка використовується в шаблоні для циклічного перегляду колекції.

Цей метод може бути дуже корисним при спробі відобразити вміст словника на вашому веб-сайті. Однак важливо зазначити, що це працюватиме лише тоді, коли ключі є рядками, оскільки вони мають бути дійсними ідентифікаторами властивостей у JavaScript.

Майте на увазі, що Angular є неймовірно гнучким – хоча описаний тут метод є хорошим рішенням, він може бути не єдиним. Залежно від ваших конкретних вимог вам може знадобитися відповідне налаштування та адаптація.

Схожі повідомлення: