form表单的formcontrol项指定默认值
解决方案:同时使用formControlName
属性和ngModel
属性。
ViewChild获取html节点内容,明明存在却是undefined
可能原因:在程序初始化完成后,就会尝试获取ViewChild所标明的节点,但该节点不一定存在(如使用*ngIf
控制),此时需要把变量对象的static
属性设置为false
,才能动态的获取内容,否则只能得到undefined
。
ng-zorro框架table组件,使用nzScroll属性造成的表头表体不对齐
不对齐一般是由nzScroll.x属性的设置造成的,可能原因:一是表头th标签的nzWidth属性值累加结果大于nzScroll.x设置的值。二是nzScroll.x的值远远超出nzWidth累加结果。
以上结论:nzScroll.x的值,需要大于或者等于表头nzWidth的累加结果,如果大于,不能大太多。
还有一种情况,nzScroll.x等于nzWidth累加,但还是有微妙的偏移,此时有可能是某个td内容(数字或者字母)换行造成一定间隔,把那一栏th的nzWidth增加即可,如果把控不好某一栏的宽度,可以不设置该栏的nzWidth,它会自动伸缩适应。加上:host
前缀,导致::ng-deep .classname
无效
在angular中,对已经封装好的组件的css进行改动,一般使用:host ::ng-deep .classname{}
格式。:host是为了把修改后的样式限制在当前使用的组件内,防止其他组件污染,::ng-deep可以跳过中间的class,在封装的组件中找到你想要的那一个。
我在使用ng-zorro框架的时候,有时候会需要修改某些组件的样式,但是很奇怪,修改后的结果不是我想的那样。 直接在开发者模式中修改,结果——成功
在代码中修改。结果——失败,但是如果把前缀:host去掉,又可以成功了,因为此时的::ng-deep已经无所顾忌无法无天的变成全局样式了。
:host ::ng-deep .ant-modal-body {height: 50vh;} // 失败::ng-deep .ant-modal-body {height: 50vh;} // 成功
调查结果:具体逻辑暂时不知道,但应该是组件的css设置有优先级,通过:host::ng-deep设置的样式被覆盖了,后来我发现,这个组件果然有暴露了设置样式的api,通过api修改就成功了。