当前位置: 首页 > Web前端 > HTML

angular中的property和attribute,以及record相关的问题

时间:2023-03-28 13:29:11 HTML

property和attribute在td中经常使用,像这样:rowspan="3"。在当前angular项目中,需要使用动态绑定rowspan。本来以为,html:ts:row=3;像这样绑定。但是控制台报错。无法绑定到“rowspan”,因为它不是“td”的已知属性。看到错误,我依稀记得property和attribute是有区别的。但是现在不明白动态绑定会报这个错。让我们在这里谈谈它。我们在Angular中给属性绑定变量时,主要有以下三种绑定方式。前两个是属性绑定,第三个是属性绑定。Attribute一般翻译成特征,Property翻译成属性。1.[property]="variable"2.property=""3.[attr.property]="xxx"并且angular在文档中声明:模板绑定适用于属性和事件,而不是属性。模板绑定是通过属性和事件来工作的,而不是属性。如图:propertyangular有两种方式,[property]="variable"和property=""是最常用的方式。这是一个测试,以查看它们之间的区别major-item-addtest="{{a}}">Consoleresult:Canonlyreceive[objectObject]2.[]方法使用控制台结果:正确打印出结果可以看出区别,后者可以正常显示我们传递的对象,如{a:1,b:2},但前者显式为'[ObjectObject]',传递的是字符串类型属性绑定。Angular中还有一个属性绑定,写成[attr.Attribute]="variable",它和Angular有什么区别呢?在了解了相关的Angular文档之后,我首先得出结论:属性是由HTML定义的。属性由DOM(文档对象模型)定义。一些HTML属性和特性之间存在1:1的映射关系,例如id。有些HTML属性没有相应的属性,例如rowspan。有些DOM属性没有相应的属性,例如textContent。文档:https://angular.cn/guide/bind...也就是说property指的是DOM中的属性,也就是JavaScript中的对象。attribute是指HTML标签上的属性,它的值只能是一个字符串。处理原则:1、在Angular中,HTMLAttribute的唯一作用就是初始化元素的状态和指令。2.HTML属性初始化DOM属性,然后他们的工作就完成了。3.Angular不建议在初始化后更改属性值,会报警告。4.改变属性的值,属性值改变,但属性值不变。测试:将与attr.test绑定,结果为:undefined。原因也很明显:app-major-item-add标签没有定义attributes属性。所以不能通过[attr.test]传入。测试:初始化后更改属性值html:ts:ngOnInit():void{setTimeout(()=>{this.row=5},5000)}测试结果:根据页面显示,看到row=5是正常的。但是console给出了ng100warning。错误:NG0100:ExpressionChangedAfterItHasBeenCheckedError:Angular仅在开发模式下抛出此错误。地址:https://angular.io/errors/NG0100Angular绑定总结:1.使用[]从source绑定到view2.使用()从view绑定到sourceSave3.使用[()]进行双向绑定,将view绑定到source然后将Set绑定到视图回到最初的问题回到最初的错误:无法绑定到'rowspan'因为它不是'td'的已知属性.解决方法:初始化时绑定一次,尽量避免在v层渲染完成后再改变。从源绑定。注意S是大写的,和Attribute不同。猜想是后来加的属性。TypeScript当时将元素压入指定位置数组的目的:在数组中找到特定的数组下标,压入到执行下标位置。但是看了函数声明后发现push并没有其他的重载方法。后来本来想用loops、concat等方法重构一个数组。不过偶然看了一下拼接方法。原以为这个函数就是一个简单的删除函数,结果看到第三个参数,发现可以用来pushitem1,item2,...——要添加到数组中的元素,从start开始。如果不指定任何元素,splice()将只从数组中删除元素。item1,item2,...–要添加到数组的元素,从头开始。如果没有指定元素,splice()将简单地从数组中删除元素。所以它可以这样使用:this.array.splice(index,0,entity);删除0个元素,并从头开始添加一个实体。问题3:当时在ts中记录了一个row变量,ts:row=0;每次循环都需要设置row-1,从而控制某个标签的输出。现在想想原因应该是:括号中的值表示绑定到html的变量。v层根据{{row}}中的变量显示row的值。类似于使用[]从源绑定到视图。但是如果使用等号,v层不知道要绑定什么变量,所以会报错。印象中thinkphp可以直接在html中使用{{$name="张三"}},没想到这里也行。然后改为函数形式。