Question

嘿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>

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

谢谢你。

Answer 1

我建议不要为表行添加组件，而是为整个表创建一个组件。

如何使用Angular

1 个答案: