Angular 8 template reference variable scope unclear

Question

I have given a name using the #var notation to an angular component ( app-backtester-chart ) created by me, but I don't understand why I don't seem to be able to reference it outside of the div it is in? I'm clearly missing something here...

  {{chartcmp.width}}
  <div class="row">
    <div class="col" *ngIf="thisStrategy">
      {{chartcmp.width}}
      <app-backtester-chart #chartcmp
                          [inputStrategy]="thisStrategy"
                          [showBenchmark]="showBenchmark">
      </app-backtester-chart>
    </div>
  </div>

The first {{chartcmp.width}} generates an error: Cannot read property 'width' of undefined

So why does the second one inside the div works, and correctly displays the width?

From the Angular documentation ( Template reference variables ):

You can refer to a template reference variable anywhere in the component's template.

I can't find an explanation anywhere. Any help would be greatly appreciated.

Answer 1

我认为这是因为你的*ngIf如果你正在做一个ngIf里面的所有 div 都没有像你的变量那样构造 ^^

Answer 2

It's beacause of the *ngIf . You can't access a template reference variable if it's not rendred.

Answer 3

第一个试试这个

{{chartcmp === null? "" : chartcmp.width}}