Как использовать встроенную директиву Angular: ngIf, ngFor, ngClass и др.

Вы можете добавить директивы в HTML в вашем проекте Angular. Некоторые управляют структурой вашей разметки, в то время как другие фокусируются на атрибутах.

В этой статье мы рассмотрим шесть наиболее распространенных директив Angular: ngFor, ngIf, ngClass, ngStyle, ngModel и ngSwitch.

Что такое угловые директивы?

Директивы Angular позволяют использовать операторы if и циклы for, а также добавлять другое поведение в HTML-код проекта Angular.

Директива	Описание
*нгесли	Вы можете использовать ngIf, когда хотите, чтобы определенные блоки HTML отображались только в том случае, если они соответствуют определенному условию. Например, если у вас есть форма со всплывающим окном, которое отображается после того, как пользователь ввел данные для определенного поля.
*ngFor	Вы можете использовать ngFor, если вам нужно, чтобы определенный блок повторялся много раз. Например, если у вас есть список элементов и вам нужно отобразить div для каждого элемента.
*нгкласс	Это добавляет условный стиль с использованием класса. Если оператор if соответствует условию, он применит указанный класс.
*нгстиль	Это добавляет условный встроенный стиль. Если оператор if соответствует условию, он применит указанные стили.
*нгМодель	Это позволяет выполнять двустороннюю привязку. Это означает, что вы можете передавать данные в обоих направлениях между файлами HTML и TypeScript. Например, вы можете передать значение атрибута из файла TypeScript в файл HTML и наоборот.
*ngSwitch	Это позволяет вам добавить оператор switch со многими случаями для проверки многих значений. В зависимости от случаев будут отображаться определенные элементы HTML.

Структурные директивы включают структуру элементов HTML. К ним относятся ngIf, ngFor и ngSwitch. Директивы атрибутов включают изменение свойств элементов HTML. К ним относятся ngStyle, ngClass и ngModel.

Как использовать нгесли

Чтобы использовать ngIf, вам нужно, чтобы условие оценивалось как истинное для отображения определенного элемента HTML.

1. Добавьте две переменные в ваш файл TypeScript. В этом примере есть переменная noPlaylists и переменная для хранения списков воспроизведения. Эта переменная будет оценена как истина, если длина массива плейлистов равна 0.

   noPlaylists: логическое значение = ложь;
   плейлисты: любой = [];
   конструктор() { }
    ngOnInit(): недействительным {
    если (this.playlists.length 0) {
    this.noPlaylists = истина;
    }
   }
   

2. В HTML добавьте инструкцию *ngIf. Если значение noPlaylists равно true, появится сообщение об ошибке, содержащееся в приведенном ниже диапазоне. Иначе не будет. Вы можете применять ngIf к различным типам HTML-теги.

   
   
   Нет доступных плейлистов.
   
   
   
   

3. Чтобы добавить компонент «else» в оператор if, вам потребуется добавить HTML-код для части «else» в блоке шаблона.

   
   
   Нет доступных плейлистов.
   
   
   
   
   
   
   Плейлисты найдены.
   
   
   
   

Как использовать нгфор

Если вам нужно повторить определенное количество блоков на странице, вы можете использовать директиву ngFor.

1. В файле TypeScript добавьте элементы в массив.

   плейлисты: любые = [
    {"name": "Рок", "numberOfSongs": 5},
    {"имя": "Современник", "numberOfSongs": 9},
    {"имя": "Популярное", "numberOfSongs": 14},
    {"name": "Акустика", "numberOfSongs": 3},
    {"name": "Свадебные песни", "numberOfSongs": 25},
    {"name": "Металл", "numberOfSongs": 0},
   ];
   

2. В HTML-файле добавьте оператор *ngFor.

   Плейлисты найдены.
   
   
   
   
   {{плейлист.название}}
   {{playlist.numberOfSongs}} песен
   
   
   
   
   
   
   

   Внутри ngFor вы сможете ссылаться на каждый объект в массиве, используя переменную «playlist». «playlist.name» и «playlist.numberOfSongs» будут печатать оба атрибута в пределах ярлык.

Как использовать нгкласс

Вы можете изменить класс стиля, который использует конкретный элемент div, в зависимости от условия.

1. Добавьте два класса в файл CSS с разными стилями. Вы можете добавить любой вид CSS-стиль вы хотите, например, разные цвета фона.

   .песни {
    цвет фона: #F7F5F2;
   }
   .noSongs {
    цвет фона: #FFA8A8;
   }

2. В цикле for из предыдущего шага добавьте директиву атрибута ngClass. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" использует тот же тернарный оператор, который JavaScript и использование других языков.

   
   
   
   
   {{плейлист.название}}
   {{playlist.numberOfSongs}} песен
   
   
   
   
   

   Если количество песен больше нуля, к элементу div будет применен класс «songs». Это придаст div серый цвет фона. В противном случае, если количество песен равно нулю, к элементу div будет применен класс noSongs. Это придаст div красный цвет фона.

Как использовать ngStyle

Вместо использования ngClass вы можете использовать ngStyle, если хотите применить встроенный стиль вместо стиля через класс.

1. Измените ngClass из предыдущего шага, чтобы вместо этого использовать ngStyle.

   
   
   {{плейлист.название}}
   {{playlist.numberOfSongs}} песен
   
   
   
   

[ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'цвет': playlist.numberOfSongs > 0? 'черный': 'темно-синий' }"

ДелитьсяДелитьсяТвитнутьДелитьсяЭл. адрес

Похожие темы

• Программирование
• Программирование
• JavaScript
• HTML
• CSS