Binding data in Angular

Компьютер, программы

→

Angular

Привязка данных в Angular

посмотрели 5743 раз

обновлено: 25 November 2020

В Angular есть четыре формы привязки данных:

Вариант 1 (односторонняя привязка).
Привязка элемента DOM к значению компоненты.

В двойных фигурных скобках указывается выражение, к которому идет привязка {{выражение}}

Пример:

Html

<h1>Добро пожаловать {{name}}!</h1>

подробнее...

Вариант 2 (односторонняя привязка).
Привязка свойства элемента DOM к значению компонента.

Пример:

Html

подробнее...

Вариант 3 (односторонняя привязка).
Привязка к событию.

Генерация события в DOM вызывает метод на компоненте.

Пример:

Html

<button (click)="addItem(text, price)">Добавить</button>

подробнее...

Вариант 4 (двусторонняя привязка).
Привязка элемента DOM к значению компоненты и наоборот.

• Изменение элемента DOM меняет значение компоненты.
• Изменение значения компоненты меняет элемента DOM.

Пример:

Html

подробнее...

Вариант 1 (односторонняя привязка). Привязка элемента DOM к значению компоненты.

Одноторонняя привязка для отображения текста.
1) Объявляем переменную в Angular компоненте
текст заключается в использовании фигурных скобок {{ }} в которые передается значение из компонента.

А можно еще метод использовать!!!!!!!!

TypeScript

import { Component } from '@angular/core';

@Component({
     selector: 'my-app',
     template: `<p>Имя: {{name}}</p>
          <p>Возраст: {{age}}</p>`
})
export class AppComponent {
     name = "Tom";
     age = 25;
}

При запуске приложения выражения {{name}} и {{age}} будут автоматически заменяться соответствующими значениями, определенными в компоненте:

Если в процессе работы приложения свойства name и age в компоненте изменят свое значение, то также изменится значение в html.

Вариант 2 (односторонняя привязка). Привязка свойства элемента DOM к значению компонента.

Мы можем привязать значение к свойству элемента html.
В этом случае свойство указывается в [] квадратных скобках.

TypeScript

import { Component } from '@angular/core';

@Component({
     selector: 'my-app',
     template: `<input type="text" [value]="name" />`
})
export class AppComponent {
     name = "Tom";
}

Вариант 3 (односторонняя привязка). Привязка к событию.

Генерация события в DOM вызывает метод на компоненте.

TypeScript

import { Component } from '@angular/core';

@Component({
     selector: 'my-app',
     template: `<p>Количество кликов {{count}}</p>
          <button (click)="increase()">Click</button>`
})
export class AppComponent {
     count: number=0;
     increase() : void {
          this.count++;
     }
}

В шаблоне определен элемент button, у которого есть событие click.
Для обработки этого события в классе AppComponent определен метод increase(), который увеличивает количество условных кликов.
В итоге при нажатии на кнопку сработает данный метод.

В качестве альтернативы мы могли бы установить привязку к событию так:

TypeScript

template: `<p>Количество кликов {{count}}</p>
<button on-click="increase()">Click</button>`

После префикса on через дефис идет название события.

Мы также можем передавать информацию о событии через объект $event

TypeScript

import { Component } from '@angular/core';

@Component({
     selector: 'my-app',
     template: `<p>Количество кликов {{count}}</p>
          <button (click)="increase($event)">Click</button>`
})
export class AppComponent {
     count: number=0;
     increase($event : any) : void {
          this.count++;
          console.log($event);
     }
}

$event - это встроенный объект, через который Angular передает информацию о событии.

Вариант 4 (двусторонняя привязка). Привязка элемента DOM к значению компоненты и наоборот.

Двусторонняя привязка позволяет динамически менять значения на одном конце привязки при изменениях на другом конце.
Как правило, двусторонняя привязка применяется при работе с элементами ввода, например, элементами типа input.

TypeScript

import { Component } from '@angular/core';

@Component({
     selector: 'my-app',
     template: `<p>Привет {{name}}</p>
          <input type="text" [(ngModel)]="name" /> <br><br>
          <input type="text" [(ngModel)]="name" />`
})
export class AppComponent {
     name:string="Tom";
}

← Previous topic
Components in Angular

Next topic →
Error "npm : The term "npm" is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spell included, verify that the path is correct and try again. " | nodejs npm angular