如何使用Angular动态添加表行？

Question

我有一个表，我想在单击“显示更多”时显示到现有表的行。

|-----------------------|
| ID   | Name  | Address|
|-----------------------|
| 1    | Sally | CA     |
|-----------------------|
| 2    | Jim   | MA     |
|-----------------------|
 Show More

点击“显示更多”时显示其他行

|-----------------------|
| ID   | Name  | Address|
|-----------------------|
| 1    | Sally | CA     |
|-----------------------|
| 2    | Jim   | MA     |
|-----------------------|
| 3    | Tim   | TX     |
|-----------------------|
|   4  | Sue   | MA     |
|-----------------------|

我可以像

一样使用吗

<table>
 <ng-container #container></ng-container>
</table>
<button (click)="showMore()">Show More</button>

@ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;

showMore() {
   const componentFactory =  
         this.componentFactoryResolver.resolveComponentFactory(Component);
   const component = container.createComponent(componentFactory);
}

Answer 1

  

根据他们评论中提到的@NTP和@DeborahK，您可以在表中添加更多行，而无需使用trackBy重新呈现整个表。针对您的场景的实时演示是 here 。