属性未显示在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>