学习Angular的数据绑定

AngularJS中的数据绑定与其他流行的库如React和Vue相当相似。它是模型和视图组件之间数据的自动同步。通过这种方法，开发人员将模型视为应用程序中的单一真理来源。视图将始终作为模型的投影。这样一来，如果模型发生变化，视图也会自动更新，反之亦然。在本教程中，我们将看到Angular中数据绑定工作的几个例子。

---

什么是Angular中的数据绑定

数据绑定是Angular中的一种通信类型。在Angular中，你有一些持有业务逻辑的TypeScript代码和一个由HTML组成的Template。在TypeScript代码中，也许做了一个计算，或者一些数据已经从服务器上下来，现在已经准备好显示给用户。这是动态数据，动态数据可以被设置为与模板中的属性绑定，这样终端用户就可以看到它。事实上，这种交流可以双向进行，这个图向我们展示了如何进行。

---

字符串插值

我们先来看看字符串插值。想象一下，我们的虚拟机有一些描述它的数据。它可能有一个名称、状态和正常运行时间。我们可以在virtual-machine.component.ts文件中像这样表示这些数据。

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

@Component({
    selector: 'app-virtual-machine',
    templateUrl: './virtual-machine.component.html'
})
export class VirtualMachineComponent {
    vmName = 'Melvin';
    vmStatus = 'online';
    vmUptime = 225;
}

现在，我们可以使用字符串插值来在模板中显示这些动态数据。现在virtual-machine.component.html文件已经更新，可以动态地输出数据。Angular为这个**{{ }}**使用了特殊的双大括号。这告诉Angular，双大括号之间的内容是可变的，并检查该数据并将其输出。

<h4>The {{ vmName }} VM is {{ vmStatus }} and has been up for {{ vmUptime }} days</h4>

---

属性绑定

另一种可以处理数据的方式是通过属性绑定。为了将模板文件中的属性与TypeScript文件中的数据绑定，你可以使用括号符号**[ ]。当你用方括号包住属性时，Angular会知道将该属性与TypeScript组件文件中的命名数据联系起来。考虑一下virtual-machines.component.html**中的这个标记。

<button [disabled]="!allowNewVm" class="btn btn-lg">Add a VM</button>
<hr>
<app-virtual-machine></app-virtual-machine>

该 disabled属性被绑定到virtual-machines.component.ts的allowNewVm变量上。

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

@Component({
  selector: 'app-virtual-machines',
  templateUrl: './virtual-machines.component.html',
  styleUrls: ['./virtual-machines.component.css'],
})
export class VirtualMachinesComponent implements OnInit {

  allowNewVm = false;

  constructor() {
    setTimeout(() => {
      this.allowNewVm = true
    }, 1500);
  }

  ngOnInit() {
  }

}

此外，我们在构造器中有一个简单的箭头函数，在1.5秒后将这个变量设置为真。这应该是一个在页面加载时被禁用的按钮，但两秒钟后，这个按钮应该变成活动的。

---

何时使用属性绑定和字符串插值

在上面的属性绑定例子中，一个布尔值被检查以确定一个属性是否应该被启用。这是属性绑定的一个完美用例。对于你想实际输出数据到屏幕上的情况，字符串插值可能会有意义。事实上，为了让我们更好地了解它是如何工作的，请看这个文件和结果输出。

<button [disabled]="!allowNewVm" class="btn btn-lg">Add a VM</button>
the allowNewVm variable is currently <b>{{ allowNewVm }}</b>
<hr>
<app-virtual-machine></app-virtual-machine>

你可以从上面的输出中看到，当这个 allowNewVm变量在真或假之间变化时，按钮的禁用或启用状态也会随之变化。很好!

这也可以通过像这样的数据绑定 innerText属性来完成。

<button [disabled]="!allowNewVm" class="btn btn-lg">Add a VM</button>
the allowNewVm variable is currently <b [innerText]="allowNewVm"></b>
<hr>
<app-virtual-machine></app-virtual-machine>

其结果是一样的。由于我们最初在{{ allowNewVm }}周围有一个包裹性的标签，我们可以简单地去掉大括号并使用那个innerText绑定。这是因为innerText指的是html标签开头和结尾之间的空间。

然而，一般来说，如果你想在模板中输出一些东西，就继续使用字符串插值。如果你想改变一个html元素、指令或组件的属性，那么你将使用属性绑定。不要把这两种方法混在一起。