关于前端: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 = "张三"}} , 没想到在这里不行。

之后改成了函数的模式。