角度12中的引导表

Question

我用引导创建了一个表；im使用了角12，当我只使用一个带有表头和主体的组件时，当我用表体创建另一个组件时，它就会变得一团糟。我试过不同的方法，但每次都是一样的。这是我的头组件

   <table class="table table-hover table-borderless">
     <thead class="tablehead">
       <tr>
         <th class="centeralign">RANKING</th>
         <th class="leftalign">TITTLE</th>
         <th class="leftalign">YEAR</th>
         <th class="leftalign">REVENUE</th>
         <th></th>
       </tr>
     </thead>
     <tbody class="tablebody" *ngFor="let movie of movieList; index as i">
       <app-movies-item [movie]="movie"></app-movies-item>
     </tbody>
   </table> 

还有我的body.component.html

<tr>
  <td class="centeralign">
    {{ movie.rank }}
  </td>
  <td class="leftalign">{{ movie.title }}</td>
  <td class="leftalign">{{ movie.year }}</td>
  <td class="leftalign">$ {{ movie.revenue }}</td>
  <td>
    <img
      src="../../assets/imgs/eye.svg"
      (click)="openModal(content, movie, modal)"
    />
  </td>
</tr>

知道为什么会这样吗？

谢谢

Answer 1

发生这种奇怪的行为是因为当您创建一个新组件并使用它时，您将在dom中插入一个新节点。在你的身体里，有这样的东西：

<tbody>
  <app-body>
    <tr>
      <td>...</td>
    </td>
  </app-body>
</tbody>

因此，在找到行和单元之前，表不认识到其体内有一个元素。如果您想这样做，最好使用“指令”并使用@ContentChild来管理它们，以获得如下内容：

<app-table>
  <app-row *ngFor="let movie of movieList" [movie]="movie">
  </app-row>
</app-table>

在这个小片段中，只有"app-table"，而"app-row“是由父程序管理的指令。