如何使用Angular插入表格行

问题描述 投票:0回答:1

嘿Angular Wizards ......

我正在使用Angular 4.0.0版开发一个项目

我的app-component模板中有以下结构:

<table>
  <thead>
   <th>ID</th>
   <th>Label</th>
   <th>Action</th>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of items">
      <tr app-vcr [item]="item"></tr>
    </ng-container>
  </tbody>
</table>

在app-vcr模板中:

<td>{{item.id}}</td>
<td>{{item.label}}</td>
<td><button (click)="viewDetails()">Details</button></td>

我有另一个app-vcr-details组件,其中包含以下模板:

<tr>
 <td colspan="99">
  <div>
   {{item.details}}
  </div>
 </td>
</tr>

在app-vcr组件中,我用这个实现了viewDetails()方法:

import { Component, OnInit, ViewContainerRef, Input, Injector,ComponentFactoryResolver } from '@angular/core';

import { VcrDetailsComponent } from 'components/VcrDetailsComponent';

...

constructor(
 private elem:ViewContainerRef,
 private r: ComponentFactoryResolver
) {}

viewDetails(){
 let factory = this.r.resolveComponentFactory(VcrDetailsComponent);
 this.elem.createComponent(factory)
}

我遇到的问题是,当我单击视图详细信息按钮时,它会插入详细信息组件,但它会像这样插入:

<app-vcr-details> <--- ** this gets inserted, which is breaking the table **
 <tr>
  <td colspan="99">
    <div>
      Show the item details here!
    </div>
  </td>
 </tr>
</app-vcr-details>

我也尝试将app-vcr-details的选择器更改为属性选择器,但后来我得到了:

<div> <--- ** this gets inserted, which is also breaking the table **
 <tr>
  <td colspan="99">
    <div>
      Show the item details here!
    </div>
  </td>
 </tr>
</div>

如何以正确的方式插入详细信息表行?

谢谢。

javascript angular
1个回答
-1
投票

我建议不要为表行使用组件,而是为整个表创建一个组件。

© www.soinside.com 2019 - 2024. All rights reserved.