Angular 角度：如何在使用变量（字符串）设置元素样式之前等待定义变量（字符串）？

我试图画两个div（每个div都包含组件），它们由一条线连接。行的长度取决于div的宽度，我使用nativeElement属性访问div

我使用ngAfterViewInit（）使用divs的nativeElements计算线条的宽度。但是，绘制div时没有任何连接线。只有在我点击div之后，这条线才会被画出来

在更新行的长度之前，如何等待线宽准备就绪

以下是模板：

<div class="bean-view" (click)="backgroundClick.emit()"> 
  <div class="bean-label-container" *ngIf="showLabels">
    <div class="bean-label" *ngFor="let label of bean.labels">{{label}}</div>
  </div>
  <div class="bean-icon-container" #beanIconContainerElement>
    <sb-bean-icon [type]="bean.type"></sb-bean-icon>
  </div>
  <div *ngIf="bean" class="bean" (click)="contentClick.emit()" #beanElement>
    <sb-bean-content [class.disable-click]="disableContentClick" [bean]="bean"></sb-bean-content>
  </div>
  <div class="bean-complete-marker completion-line" [style.width]="lineWidth"></div>
  <div class="bean-response-wrapper">
    <div class="bean-response" *ngFor="let response of bean.response" (click)="responseClick.emit()" #beanResponseElement>
      <sb-bean-content [bean]="response" [isResponse]="true"></sb-bean-content>
    </div>
  </div>
</div>

使用而不是类似的

style.width

<div class="bean-complete-marker completion-line" [ngStyle]="{'width': lineWidth}"></div>

使用而不是类似的

style.width

<div class="bean-complete-marker completion-line" [ngStyle]="{'width': lineWidth}"></div>

---

可以在style指令中指定像素单位：

<div class="bean-complete-marker completion-line" [style.width.px]="lineWidth"></div>

要确保DOM始终是最新的，请从组件声明中删除此行：

changeDetection: ChangeDetectionStrategy.OnPush 

---

可以在style指令中指定像素单位：

<div class="bean-complete-marker completion-line" [style.width.px]="lineWidth"></div>

要确保DOM始终是最新的，请从组件声明中删除此行：

changeDetection: ChangeDetectionStrategy.OnPush 

---

---

尝试了ngStyle，但遇到了相同的结果。我的答案是，将

linewidth

替换为

getWidth（）

。那行吗？刚试过，但那是个错误。nativeElement似乎在准备就绪之前就已被访问。如果您在

getWidth

中为

nativeElement

设置一些保护，则此答案应该有效。事实上，您可以使用OP原始代码和模板，并将

getWidth

的逻辑放入属性getter中，如

public get lineWidth（）：number

。对不起，您能否详细介绍一下为nativeElement添加保护和使用属性getter？尝试了ngStyle，但遇到了相同的结果，将

linewidth

替换为

getWidth（）

。那行吗？刚试过，但那是个错误。nativeElement似乎在准备就绪之前就已被访问。如果您在

getWidth

中为

nativeElement

设置一些保护，则此答案应该有效。事实上，您可以使用OP原始代码和模板，并将

getWidth

的逻辑放入属性getter中，如

public get lineWidth（）：number

。对不起，您能否详细介绍一下为nativeElement添加保护和使用属性getter？您可以使用setTimeout（）并将超时设置为300（0.3秒）？不是最干净的解决方案，但我认为它在99.99%的情况下都能工作。您可以使用setTimeout（）并将超时设置为300（0.3秒）？这不是最干净的解决方案，但我认为它在99.99%的情况下都会起作用。但是，直到我单击div，这条线才画出来。从组件声明中删除这条线：

changeDetection:ChangeDetectionStrategy.OnPush

。禁用了changeDetection行。我仍然需要单击以绘制线条，但现在，单击将绘制所有必需的线条，而不是一次绘制一条线条。如果您在其他组件中有

ChangeDetectionStrategy.OnPush

，请也删除这些线条。我在其他每个组件中都删除了这些线条，并且仍然遇到相同的问题。尝试了这个，但是直到我单击div，这条线才被画出来。从组件声明中删除这条线：

changeDetection:ChangeDetectionStrategy.OnPush

。禁用了changeDetection线。我仍然需要单击以绘制线条，但现在，单击将绘制所有必需的线条，而不是一次绘制一条线条。如果您在其他组件中有

ChangeDetectionStrategy.OnPush

，请也删除这些线条。我在其他每个组件中都删除了这些线条，并且仍然遇到相同的问题。