property and attribute in angular, and record related issues

property and attribute

When td is usually used, it is used like this: rowspan="3" .

In the current angular project, dynamic binding of rowspan is required.

I was thinking,
html:
<td rowspan="{{row}}">

ts:
row = 3;
Bind like this.

But the console reported an error.

 Can't bind to 'rowspan' since it isn't a known property of 'td'.

See the error, vaguely remember that there is a difference between property and attribute.

But now I don't understand that dynamic binding will report this error. Let's talk about it here.

---

When we bind a variable to a property in Angular, there are mainly the following three binding methods
The first two are property bindings, and the third is attribute bindings.

Attribute is generally translated into properties, and Property is translated into attributes.

 1. [property] = "variable"
2. property = ""
3. [attr.property] = "xxx"

And angular has stated in the documentation:

Template binding works with properties and events, not attributes.
Template binding works through properties and events, not attributes.

As shown in the figure:

property

There are two ways in angular, [property] = "variable" and property = ""

These two methods are also the most commonly used. Here is a test to see the difference between them

 export class AddComponent implements OnInit {
  
  @Input()
  test: any

 ngOnInit(): void {
    console.log(this.test);
}

1. {{}} method usage

 <app-major-item-add test="{{a}}" ></app-major-item-add>

Console result: can only receive [object Object]

2. [] method usage

 <app-major-item-add [test]="a" ></app-major-item-add>

console result: the result is printed correctly

Now you can see the difference, the latter can normally express the object we pass, such as {a: 1, b: 2}, but the former is explicitly '[Object Object]', and the passed is string type

attribute binding

There is also an attribute binding in Angular, which is written as [attr.Attribute]="variable" . What is the difference between it and it?

After understanding the relevant Angular documentation, I first summarize:

attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).
There is a 1:1 mapping between a few HTML attributes and properties, such as id.
Some HTML attributes do not have corresponding properties, such as rowspan.
Some DOM properties do not have corresponding attributes, such as textContent.

Documentation: https://angular.cn/guide/binding-syntax

That is to say , property refers to the property in the DOM, which is the object in JavaScript
attribute refers to the attribute on the HTML tag , and its value can only be a string.

Processing principle:

1. In Angular, the only role of HTML Attribute is to initialize the state of elements and directives.
2.HTML attributes initialize DOM properties, then their task is done.
3. Angular does not recommend changing the value of attribute after initialization, and a warning will be reported.
4. Change the property value, the property value changes, the attribute value does not change.

Test: bind with attr.test

 <app-major-item-add [attr.test]= "a" ></app-major-item-add>

The result is: undefined . The reason is also obvious: the app-major-item-add tag does not define the attributes attribute. So it cannot be passed in through [attr.test].

Test: Change the value of attribute after initialization

html:
<td [attr.rowspan]="row">

ts:

 ngOnInit(): void {
    setTimeout(() => {
      this.row = 5
    }, 5000)
}

Test results: According to the page display, row = 5 is normally seen. But the console gave an ng100 warning.
Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError:

Angular throws this error only in development mode.
Address: https://angular.io/errors/NG0100

Angular binding summary:

1. Use [] to bind to the view from the source

 <img [alt]="hero.name" [src]="heroImageUrl">

2. Use () to bind from the view to the source

 <button type="button" (click)="onSave()">Save</button>

3. Use [()] for two-way binding, bind the view to the source and then bind to the view

 <input [(ngModel)]="name">

back to the original topic

Back to the error I encountered at the beginning:

 Can't bind to 'rowspan' since it isn't a known property of 'td'.

Solution:

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

Bind it once during initialization, and try to avoid changing it after the v-layer rendering is complete.

2. <td [rowSpan]="row">

Bind from source. Note that S is capitalized, which is not the same as Attribute. Guess it's an attribute added later.

TypeScript pushes element into array at specified position

The purpose at that time: Find a specific array subscript in the array, and push it to the execution subscript position.

But after reading the function declaration, I found that there are no other overloaded methods of push .

After that, I wanted to use methods such as looping and concat to reconstruct an array.

But I took a look at the splice method by accident. I thought that this function was purely a delete function , but when I saw the third parameter, I found that it can be used for 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, ... – elements to add to the array, starting at the beginning. If no elements are specified, splice() will only remove elements from the array.

So it can be used like this:

 this.array.splice(index, 0, entity);

Delete 0 elements and add an entity from start.

Question three:

At that time, a row variable was recorded in ts,
ts:
row = 0;

I want row - 1 every time I loop to control the output of a certain label.

Now think about the reasons why:
Values in parentheses represent variables bound to html.

The v layer displays the value of row according to the variables in {{row}}.

Similar to using [] to bind to a view from the source. If the equal sign is used, the v layer does not know what variable to bind to, so an error is reported.

In my impression, thinkphp can be used directly in html {{$name = "张三"}} , but I didn't expect it to work here.

It was then changed to the form of a function.