如何解决属性未显示在Angular中
我是Angular的新手,尝试边做边学。
有些事情我不理解,为什么这些属性未显示在.wagon-placeholder
下的以下代码中?对我来说,第一分区的{{TrackIdStyle}}
和第二分区的{{TrackId}}
之间没有区别。为什么[pos]
也不起作用?
感谢您的澄清。
(完整)track.component.html
<div class="setRelative">
<div class="track-id" style={{TrackIdStyle}}>{{TrackId}}</div>
<div class="track-id track-id-2" *ngIf="TrackIsBoth">{{TrackId}}</div>
<div class="track-line"></div>
<div class="setFlex">
<div class="placeholder" *ngFor="let place of qty_placeholder;"
track={{TrackId}}
[pos]="place"
style="width:{{placewidth}}px"
>
</div>
</div>
</div>
返回以下内容:
<div _ngcontent-uvg-c46="" class="setRelative">
<div _ngcontent-uvg-c46="" class="track-id" style="right: -1.3em;">86</div>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
<div _ngcontent-uvg-c46="" class="track-line"></div>
<div _ngcontent-uvg-c46="" class="setFlex">
<div _ngcontent-uvg-c46="" class="placeholder" style="width: 90.7692px;"></div>
<div _ngcontent-uvg-c46="" class="placeholder" style="width: 90.7692px;"></div>
<div _ngcontent-uvg-c46="" class="placeholder" style="width: 90.7692px;"></div>
<div _ngcontent-uvg-c46="" class="placeholder" style="width: 90.7692px;"></div>
<!--bindings={
"ng-reflect-ng-for-of": "1,1,2,3"
}-->
</div>
</div>
我想要的是<div class="placeholder" style="blabla" track="blabla" pos=1></div>
qty_placeholder
只是一个数组[1,3,...] *
解决方法
要在HTML元素上添加自定义属性,请使用[attr.attribute-name] = "value"
下面是第二个分区的修改后的代码段。
<div class="placeholder" *ngFor="let place of qty_placeholder;"
[attr.track] ="TrackId"
[attr.pos]="place"
[ngStyle]="{'width.px': placewidth}"
>
</div>
因为,未提供值。我设置了以下属性值:
qty_placeholder = [1,2,3,4];
TrackId = "TRACK_ID";
placewidth = 300
输出:
<!--bindings={
"ng-reflect-ng-for-of": "1,4"
}-->
<div _ngcontent-yju-c37="" class="placeholder" ng-reflect-ng-style="[object Object]"
track="TRACK_ID" pos="1" style="width: 300px;"></div>
<div _ngcontent-yju-c37="" class="placeholder" ng-reflect-ng-style="[object Object]"
track="TRACK_ID" pos="2" style="width: 300px;"></div>
<div _ngcontent-yju-c37="" class="placeholder" ng-reflect-ng-style="[object Object]"
track="TRACK_ID" pos="3" style="width: 300px;"></div>
<div _ngcontent-yju-c37="" class="placeholder" ng-reflect-ng-style="[object Object]"
track="TRACK_ID" pos="4" style="width: 300px;"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。