Html 如何将样式化的使用Render2应用于ElementRef的子节点->；角坐标中的本征元素

假设我有以下角度模板：

<p class="margin0 text-overflow table-cell" #ParentP>
  <span id="managerDisplayName" #FirstSpan class="bold" title="{{ someBinding 1}}">{{ someBinding2 }}</span>
  <span id="regionName" #SecondSpan class="bold regionName" title="{{ someBinding3 }}"> {{ someBinding4 }}</span> 
  <span class="service-level-icon">
    <b placement="bottom" #IconHolder triggers="mouseenter:mouseleave" container="body" *ngIf=" someCondition1 " popoverTitle="" [ngbPopover]="servicelevelcontent"><i class="somecon"></i></b>                                        
  </span>
</p>

{{someBinding2}
{{someBinding4}

使用

*ngFor

多次生成此代码段

我想通过计算第一个和第二个

的宽度来动态更改

标记的左对齐方式

我已经尝试使用

[style.left.px]=“FirstSpan.offsetWidth+SecondSpan.offsetWidth+3”

，但这会抛出选中后更改的

表达式

然后我想尝试使用
QueryList
，但我面临的问题是，图标只在某些情况下出现，因此，我无法使用
ElementRef
的
children
属性向
添加样式，因为
render2
抛出错误，表示找不到
style
属性

请帮助我解决此问题。
只需使用
[style.left.px]
&使用
@viewChildren
选择这些元素即可。将视图代码更新为：

<p class="margin0 text-overflow table-cell" #ParentP>
  <span id="managerDisplayName" #FirstSpan class="bold" title="{{ someBinding 1}}">{{ someBinding2 }}</span>
  <span id="regionName" #SecondSpan class="bold regionName" title="{{ someBinding3 }}"> {{ someBinding4 }}</span> 
  <span class="service-level-icon">
    <b placement="bottom" #IconHolder [style.left.px]="updatedLeftStyle" triggers="mouseenter:mouseleave" container="body" *ngIf=" someCondition1 " popoverTitle="" [ngbPopover]="servicelevelcontent"><i class="somecon"></i></b>                                        
  </span>
</p>

这用于更新ViewInit之后上下文变量的值。现在课堂上有以下变化：

@ViewChildren('FirstSpan,SecondSpan') spans:QueryList<ElementRef>;

constructor(private cdRef:ChangeDetectorRef) { }

ngAfterViewInit() {
    console.debug(this.spans); 
    let eleArr: any = this.spans.toArray();
    this.updatedLeftStyle = eleArr[0].nativeElement.offsetWidth + eleArr[1].nativeElement.offsetWidth;
    this.cdRef.detectChanges();
  }

@ViewChildren（'FirstSpan，SecondSpan'）span:QueryList；
构造函数（私有cdRef:ChangeDetectorRef）{}
ngAfterViewInit（）{
调试（this.span）；
让eleArr:any=this.span.toArray（）；
this.updatedLeftStyle=eleArr[0]。nativeElement.offsetWidth+eleArr[1]。nativeElement.offsetWidth；
this.cdRef.detectChanges（）；
}

如果您在stackblitz中添加了代码，那么很容易帮助您感谢您的工作演示。这个补丁对我有用@阿诸那惊慌失措的人很高兴这有帮助！：）
@ViewChildren('FirstSpan,SecondSpan') spans:QueryList<ElementRef>;

constructor(private cdRef:ChangeDetectorRef) { }

ngAfterViewInit() {
    console.debug(this.spans); 
    let eleArr: any = this.spans.toArray();
    this.updatedLeftStyle = eleArr[0].nativeElement.offsetWidth + eleArr[1].nativeElement.offsetWidth;
    this.cdRef.detectChanges();
  }