角2のコンポーネントツリー

Question

私はAngular 2で私の最初のアプリケーションを開発しています。私はコードをデバッグするために、Google ChromeのAuguryプラグインをインストールしました。

ここでコンポーネントツリーとグラフです：

これは私のカスタムコンポーネント（DocumentsList）のHTMLテンプレートです：中span以来

<div class="container-fluid" style="margin-top: 10px"> 
    <div class="table-row header"> 
     <div class="column index">#</div> 
     <div class="wrapper attributes"> 
      <div class="wrapper title-comment-module-reporter"> 
       <div class="wrapper title-comment"> 
        <div class="column title">Title</div> 
        <div class="column comment">Comment</div> 
       </div> 
       <div class="wrapper module-reporter"> 
        <div class="column module">Module</div> 
        <div class="column reporter">Reporter</div> 
       </div> 
      </div> 
      <div class="wrapper status-owner-severity"> 
       <div class="wrapper status-owner"> 
        <div class="column status">Status</div> 
        <div class="column owner">Owner</div> 
       </div> 
       <div class="column severity">Severity</div> 
      </div> 
     </div> 
     <div class="wrapper icons"> 
      <div title="Watch" class="column watch"> 
       <span class="glyphicon glyphicon-eye-open"></span> 
      </div> 
      <div title="Add comment" class="column add-comment"> 
       <span class="glyphicon glyphicon-comment"></span> 
      </div> 
     </div> 
     <div class="wrapper dates"> 
      <div class="column date">Created</div> 
      <div class="column date">Updated</div> 
      <div class="column date">Due</div> 
     </div> 
    </div> 

    <div *ngFor="let document of docs" class="table-row"> 
     <div class="column index">{{document.id}}</div> 
     <div class="wrapper attributes"> 
      <div class="wrapper title-comment-module-reporter"> 
       <div class="wrapper title-comment"> 
        <div class="column title">{{document.title}}</div> 
        <div class="column comment">{{document.comment}}</div> 
       </div> 
       <div class="wrapper module-reporter"> 
        <div class="column module">{{document.module}}</div> 
        <div class="column reporter">{{document.reporter}}</div> 
       </div> 
      </div> 
      <div class="wrapper status-owner-severity"> 
       <div class="wrapper status-owner"> 
        <div class="column status"><span class="label" [ngClass]="{'Open': 'label-primary', 'In Progress': 'label-success'}[document.status]">{{document.status}}</span></div> 
        <div class="column owner">{{document.owner}}</div> 
       </div> 
       <div class="column severity high">{document.severity}}</div> 
      </div> 
     </div> 
     <div class="wrapper icons"> 
      <div class="column watch"><span class="glyphicon glyphicon-eye-open" [class.active]="document.watched"></span></div> 
      <div class="column add-comment"><span class="glyphicon glyphicon-comment" [class.active]="document.commented"></span></div> 
     </div> 
     <div class="wrapper dates"> 
      <div class="column date">{{document.created}}</div> 
      <div class="column date">{{document.updated}}</div> 
      <div class="column date">{{document.due}}</div> 
     </div> 
    </div> 
</div> 

グラフはdivの子で、そこにはがあります210ディレクティブの場合、spanの親としてグラフに表示しないでください。

私はグラフが、この（ペイントで作成した画像）のように見えたはずだと思う

​​

Answer 1

短い答えは、はい。それは理にかなっている。