angular中 property 和 attribute， 以及记录相关的问题

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'.

解决方法：

1. <td [attr.rowspan]="row">

初始化时绑定一次, 尽量避免在v层渲染完成后再改变。

2. <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 = "张三"}} , 没想到在这里不行。

之后改成了函数的形式。