模板与数据绑定

模板可以让您在 Angular 中显示动态内容。本课将探讨模板和数据绑定的工作方式。

什么是模板？

模板是 Angular 用于渲染组件视图的 HTML。它将 HTML 与 Angular 特有的语法结合起来显示数据。

插值

插值允许您将组件中的值插入 HTML。使用双大括号显示数据：

{{ data }}

{{ username }}

属性绑定

属性绑定可以让您动态设置 HTML 元素的属性：

[src] = "imageUrl"

<img [src]="user.profilePicture">

事件绑定

事件绑定可以让您的应用响应用户操作：

(click)="onClick()"

<button (click)="showAlert()">Click me</button>

双向绑定

双向绑定可以保持用户界面与数据同步。使用 [(ngModel)]：

<input [(ngModel)]="user.name">

结构型指令

结构型指令会修改 DOM 布局。例如 *ngIf 和 *ngFor。

<div *ngIf="isVisible">Visible Content</div>

使用 ngFor

*ngFor 会遍历数据并重复显示元素：

<li *ngFor="let item of items">{{ item }}</li>

总结

您已经学习了如何使用模板和数据绑定来创建动态 Angular 视图！