0

我是 Angular 2 的绝对初学者，我对属性绑定有以下疑问。

这个例子有效，但我怀疑引擎盖下到底发生了什么。

我有一个包含此按钮的组件视图（servers.component.html文件）：

<button [disabled]="!allowNewServer" class="btn btn-primary">Add Server</button>

相关组件是：

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

@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {
  allowNewServer = false;

  constructor() {
    setTimeout(() => {
      this.allowNewServer = true;
    }, 8000);
  }

  ngOnInit() {
  }

}

正如您在开始时看到的那样， allowNewServer的值为false，8 秒后它被构造函数中声明的函数设置为true 。

在我的按钮上设置了这个禁用属性：

 [disabled]="!allowNewServer"

所以一开始按钮是禁用的，8秒后它会启用。

穆的疑惑是：

1) [...] Angular 语法到底是什么意思？

2）我预计会呈现类似于disabled=true的内容（在开始时），然后在 8 秒后呈现类似于disabled=dalse的内容，但在 8 秒后只会删除disable属性。所以我认为我不理解[...]语法的含义。

4

4 回答 4

1

该[...]语法用于属性绑定。更多信息在这里。

我建议您遵循 Google 制作的英雄之旅教程。它解释了有关 Angular (v2,v4) 的基础知识，并帮助您创建您的第一个很酷的应用程序。你可以在这里找到它。

于 2017-06-08T12:11:18.237 回答
1
  1. 语法告诉 Angular将[]来自数据源（组件实例）的信息与模板（html）绑定。
  2. 你的问题是什么？
于 2017-06-08T12:21:37.603 回答
1

回答你的问题

[...] Angular 语法到底是什么意思？

上述语法用于数据绑定。正如官方文档所说。

编写模板属性绑定来设置视图元素的属性。绑定将属性设置为模板表达式的值。封闭方括号之间的元素属性标识目标属性

回答你第二个问题

我预计会呈现类似于 disabled=true 的内容（在开始时），然后在 8 秒后呈现类似于 disabled=false 的内容，但在 8 秒后只会删除禁用属性。所以我认为我不理解 [...] 语法的含义。

[disabled]="!allowNewServer"

这行代码要做的是，它将禁用属性设置为 true 或 false 基于allowNewServer。但是 disabled 是一个布尔属性，即仅表示该属性的存在意味着其设置为 true，而缺少则意味着它为 false。官方文档说

许多属性是布尔属性。元素上存在布尔属性表示真值，不存在属性表示假值。如果属性存在，其值必须是空字符串或不区分大小写的 ASCII 匹配值用于属性的规范名称，没有前导或尾随空格。

因此，当该值设置为不被视为有效值的 false 时，角度会删除该属性，因为它认为缺失意味着 false。因此行为。

以供参考：

布尔属性

属性绑定

希望能帮助到你 ：）

于 2017-06-08T12:23:09.503 回答
1

对于＃2 - 您的假设对于大多数 html 和自定义属性都是正确的。不过disabled是特例。HTML 规范期望该属性对于禁用的元素没有值，而对于其余情况则没有。即<input disabled="true">不是编码HTML 的正确方法。此外，当您拥有<input disabled="false">. 这就是 Angular 将其移除的原因。

于 2017-06-08T12:24:12.320 回答