共计 2896 个字符，预计需要花费 8 分钟才能阅读完成。
property 和 attribute
平常用到 td 的时候, 像这样用：rowspan="3"。
在以后 angular 我的项目中，须要用到动静绑定 rowspan。
原本想的是，
html:<td rowspan="{{row}}">
ts:row = 3;
这样绑定。
然而控制台报了一个错。
Can't bind to'rowspan'since it isn't a known property of 'td'.看到报错，依稀记得 property, 和 attribute 是有区别的。
然而当初又不明确动静绑定会报这个错。 这里来讲一下。
当咱们在 Angular 中给属性绑定一个变量的时候，次要有上面三种绑定形式
前两者为 property 绑定， 第三个为 attribute 绑定。
Attribute 个别被翻译为个性，Property 被译为属性。
1. [property] = "variable"
2. property = ""3. [attr.property] ="xxx"并且 angular 曾经在文档中阐明：
Template binding works with properties and events, not attributes.
模板绑定是通过 property 和事件来工作的，而不是 attribute。
如图:
property
angular 中有两种形式，[property] = "variable" 和 property = ""
这两种形式也是平时应用最多的。这里用个测试来看看它们的区别
export class AddComponent implements OnInit {@Input()
test: any
ngOnInit(): void {console.log(this.test);
}1.{{}}办法应用
<app-major-item-add test="{{a}}" ></app-major-item-add>
控制台后果：只能接管到[object Object]
2.[]办法应用
<app-major-item-add [test]="a" ></app-major-item-add>
控制台后果：正确打印出后果
这下便能够看出区别了，后者能够失常的显式咱们传递的对象，比方 {a: 1, b: 2}，然而前者显式的却是 ‘[Object Object]’, 传递的是 string 类型
attribute 绑定
在 Angular 中还有一种 attribute 绑定，写法为 [attr.Attribute]="variable"，它和区别又在哪里?
理解相干 Angular 文档后，我先总结:
attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。
大量 HTML attribute 和 property 之间有着 1:1 的映射，如 id。
有些 HTML attribute 没有对应的 property，如 rowspan。
有些 DOM property 没有对应的 attribute，如 textContent。
文档：https://angular.cn/guide/bind…
也就是说 property 指的是 DOM 中的属性，是 JavaScript 里的对象
attribute 指的是 HTML 标签上的个性，它的值只可能是字符串。
解决准则：
1. 在 Angular 中，HTML Attribute 的惟一作用是初始化元素和指令的状态。
2.HTML attribute 初始化 DOM property，而后它们的工作就实现了。
3.angular 不举荐在初始化后更改 attribute 的值，会报正告。
4. 更改 property 的值，property 值扭转，attribute 值不变。
测试：用 attr.test 绑定
<app-major-item-add [attr.test]= "a" ></app-major-item-add>
后果为:undefined。起因也很显著：app-major-item-add 标签并没有定义 attributes 属性。 所以不能通过 [attr.test] 传入。
测试：在初始化后更改 attribute 的值
html:<td [attr.rowspan]="row">
ts:
ngOnInit(): void {setTimeout(() => {this.row = 5}, 5000)
}测试后果：依据页面显示，失常看到 row = 5。然而控制台收回了 ng100 正告。
Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError:
Angular 仅在开发模式下抛出此谬误。
地址：https://angular.io/errors/NG0100
angular 绑定总结：
1. 应用 [] 从源绑定到视图
<img [alt]="hero.name" [src]="heroImageUrl">2. 应用 () 从视图绑定到源
<button type="button" (click)="onSave()">Save</button>3. 应用 [()] 进行双向绑定，将视图绑定到源再绑定到视图
<input [(ngModel)]="name">回到原题
回到最开始遇到的报错：
Can't bind to'rowspan'since it isn't a known property of 'td'.解决办法：
<td [attr.rowspan]="row">
初始化时绑定一次, 尽量避免在 v 层渲染实现后再扭转。
<td [rowSpan]="row">
从源绑定。留神 S 是大写，和 Attribute 不一样。猜想是前期增加的属性。
TypeScript 在指定地位 push 元素到数组中
过后的目标：在数组中找到特定的数组下标, 并 push 到执行下标地位。
然而看了函数申明之后发现，并没有发现有 push 的其余重载办法。
之后原本想用循环和 concat 之类的办法，从新结构一个数组。
然而偶然间看了一下 splice 办法，本来认为这个函数单纯的是删除的性能，然而看到第三个参数，发现能够用来 push
item1, item2, … – The elements to add to the array, beginning from start. If you do not specify any elements, splice() will only remove elements from the array.
item1，item2，…–要增加到数组中的元素，从开始处开始。如果未指定任何元素，splice（）将只从数组中删除元素。
所以能够这样用:
this.array.splice(index, 0, entity);删除 0 个元素，从 start 处 新增 一个 entity.
问题三：
过后在 ts 里 记录一个 row 变量，
ts: row = 0;
想要每次循环的时候 row – 1 , 以方面管制某一标签的输入。
当初想想起因应该是：
括号里的值示意绑定到 html 的变量。
v 层依据 {{row}} 里的变量，显示 row 的值。
和用 [] 从源绑定到视图相似。而应用 若应用 等号，v 层就不晓得和什么变量绑定，所以报错。
印象中 thinkphp 中 能够间接在 html 中应用 {{$name = "张三"}} , 没想到在这里不行。
之后改成了函数的模式。