Angular 中未显示的属性

Question

我是 Angular 的新手，正在尝试边做边学。

有点不明白，为什么在.wagon-placeholder下面的代码中不显示属性？对我来说，第一个 div 中的 {{TrackIdStyle}} 和第二个 div 中的 {{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>

Returns 以下:

<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,2,3,...] *

Answer 1

要在 HTML 元素上添加自定义属性，请使用 [attr.attribute-name] = "value"

下面是第二个 div.

的修改后的片段

 <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,2,3,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>

Angular 中未显示的属性

Properties not displayed in Angular

properties

property-binding

angular