Html 实现表的通用组件

我有一个前端应用程序，在它的组件中我经常使用table。然后我决定为一个表编写一个通用组件

首先，我为表中的每个单元格编写一个模型：

export class MemberTable {
  public content: string;
  public type: string; // type --> [text, html, hyperlink, routerlink, button, hidden]
  public functionNum: number;
  public address: string;
  public queryParams: {};
  public cssClass: string;

  constructor(content = '', type = 'text', address = null, queryParams = null, functionNum = 0, cssClass = null) {
    this.content = content;
    this.type = type;
    this.address = address;
    this.queryParams = queryParams;
    this.functionNum = functionNum;
    this.cssClass = cssClass;
  }
}

内容：单元格的内容

类型：单元格有不同的类型。例如，它可以是链接、文本或按钮

根据类型属性，其他属性可以具有值

表组件：

ts文件：

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { MemberTable } from '../../../models/member-table.model';

@Component({
  selector: 'app-lenard-table',
  templateUrl: './lenard-table.component.html',
  styleUrls: ['./lenard-table.component.css']
})
export class LenardTableComponent implements OnInit {

  @Input() headTable: any[] = [];
  @Input() bodyTable: Array < Array < MemberTable >> = new Array < Array < MemberTable >> ();

  @Output() function1 = new EventEmitter < any > ();
  @Output() function2 = new EventEmitter < any > ();
  @Output() function3 = new EventEmitter < any > ();

  constructor(private comm: LoggedUserBaseListComponent) {}

  ngOnInit() {}


  onFunction1() {
    this.function1.emit(true);
  }

  onFunction2() {
    this.function2.emit(true);
  }

  onFunction3() {
    this.function3.emit(true);
  }

}

从'@angular/core'导入{Component，Input，OnInit，Output，EventEmitter}；
从“../../../models/member table.model”导入{MemberTable}；
@组成部分({
选择器：'app lenard table'，
templateUrl:'./lenard table.component.html'，
样式URL:['./lenard table.component.css']
})
导出类LenardTableComponent实现OnInit{
@Input（）头表：任意[]=[]；
@Input（）bodyTable:Array>=新数组>（）；
@Output（）function1=neweventemitter（）；
@Output（）function2=neweventemitter（）；
@Output（）function3=neweventemitter（）；
构造函数（专用命令：LoggedUserBaseListComponent）{}
ngOnInit（）{}
onFunction1（）{
this.function1.emit（true）；
}
onFunction2（）{
this.function2.emit（true）；
}
onFunction3（）{
this.function3.emit（true）；
}
}

html文件

<div class="table-responsive">
  <table 
    class="table table-hover text-center" 
    style="border: 2px solid #DADADE;">
    <thead>
      <tr class="middle-blue">
        <th *ngFor="let text of headTable" 
          class="lenard-th" 
          [innerHtml]="text">
        </th>
      </tr>
    </thead>

    <tbody>
      <tr 
        *ngFor="let memberArr of bodyTable" 
        style="border-top: 2px solid #949496;">

        <ng-container *ngFor="let member of memberArr">
          <td *ngIf="member.type == 'text'">{{ member.content }}</td>

          <td *ngIf="member.type == 'routerlink'">
            <a 
              [routerLink]="member.address" 
              [queryParams]="member.queryParams" 
              [ngClass]="member.cssClass">
              {{ member.content }}
            </a>
          </td>

          <td *ngIf="member.type == 'hyperlink'">
            <a 
              [href]="member.address" 
              [ngClass]="member.cssClass">
              {{ member.content }}
            </a>
          </td>

          <td *ngIf="member.type == 'button'">
            <button 
              *ngIf="member.functionNum == 1" 
              [ngClass]="member.cssClass" 
              (click)="onFunction1()">
              {{ member.content }}
            </button>
            <button 
              *ngIf="member.functionNum == 2" 
              [ngClass]="member.cssClass" 
              (click)="onFunction2()">
              {{ member.content }}
            </button>
            <button 
              *ngIf="member.functionNum == 3" 
              [ngClass]="member.cssClass" 
              (click)="onFunction3()">
              {{ member.content }}
            </button>
          </td>

          <td 
            *ngIf="member.type == 'html'" 
            [innerHtml]='member.content'>
          </td>
        </ng-container>

      </tr>
    </tbody>
  </table>
</div>

{{member.content}
{{member.content}
{{member.content}
{{member.content}

我想知道，这个方法是否正确

编辑：

我可以在其他组件中使用表组件，如下所示：

this.headTable = ['#', 'Analyzer Model', 'Serial No.', 'Ava. Credits', 'Total Tests',
                  'Passed Tests', 'Failed Tests', 'Adapters', ' '];


this.bodyTable.push([new MemberTable(index.toString(), 'text'),
                                new MemberTable(ub.id, 'hidden'),
                                new MemberTable(ub.base_version, 'text'),
                                new MemberTable(ub.serialNumber, 'text'),
                                new MemberTable('12121', 'routerlink', '/controlpanel/customer/mycredit/1/list'),
                                new MemberTable(ub.totalReportCount, 'routerlink', '/controlpanel/customer/analyzer/info/' + user_base.id + '/test/list', {'select': 'total'}),
                                new MemberTable(ub.passedReportCount, 'routerlink', '/controlpanel/customer/analyzer/info/' + user_base.id + '/test/list', {'select': 'passed'}),
                                new MemberTable(ub.failedReportCount, 'routerlink', '/controlpanel/customer/analyzer/info/' + user_base.id + '/test/list', {'select': 'failed'}),
                                new MemberTable(ub.adapterCount, 'routerlink', '/controlpanel/customer/analyzer/info/' + user_base.id + '/adapterlist'),
                                new MemberTable('Add Credits', 'button', null, null, 1, 'btn btn-round btn-orange btn-xs')
                              ])


<app-lenard-table [headTable]="headTable" [bodyTable]="bodyTable" 
    (function1)="goAct()">

this.headTable=['#'，'Analyzer Model'，'Serial No'，'Ava.Credits'，'Total Tests'，
'通过测试'，'失败测试'，'适配器'，''；
this.bodyTable.push（[new MemberTable（index.toString（），'text'），
新成员表（ub.id，“隐藏”），
新成员表（ub.base_版本，“文本”），
新成员表（ub.serialNumber，'text'），
新成员表（'12121'，'routerlink'，'/controlpanel/customer/mycredit/1/list'），
新的MemberTable（ub.totalReportCount，'routerlink'，'/controlpanel/customer/analyzer/info/'+user_base.id+/test/list'，{'select'：'total'}），
新成员表（ub.passedReportCount，'routerlink'，'/controlpanel/customer/analyzer/info/'+user_base.id+'/test/list'，{'select'：'passed'}），
新成员表（ub.failedReportCount，'routerlink'，'/controlpanel/customer/analyzer/info/'+user_base.id+'/test/list'，{'select'：'failed'}），
新成员表（ub.adapterCount，'routerlink'，'/controlpanel/customer/analyzer/info/'+user_base.id+'/adapterlist'），
新成员表（'Add Credits'，'button'，null，null，1，'btn btn round btn orange btn xs'）
])

---

这实际上取决于你的需要。如果你想要快速有效的解决方案，这对你来说已经足够了。但是，为了提高可重用性，最好为每个行类型组件创建一个组件，并根据当前行呈现动态添加它。还有另一种方法，就是不要重新发明轮子，例如数据网格。数据网格具有许多优点，如排序、分页等，它们的优点很多，但它们不是免费的

我实现了这个方法。但是它好还是不好？你只是把MemberTable当作一个没有任何功能的模型来使用吗？这个问题应该在CodeReview上提出。@JameelM，是的，它就像模型一样使用。Angular建议对数据模型使用接口而不是类。我的主要问题是“为每个单元格创建一个obj是否正确”？例如，如果表中有20*10个单元格，则我有200个对象的集合。它是否会降低appAgain的性能？这取决于*ngFor中的表（不包括其他组件），因为滚动时，您可能至少有500个对象，但仍有60fps。但请记住，当变更检测到达表中时，会检查每个*ngIf。所以每行可以有5*ngIf支票。这就是为什么我在回答中提到为每一行类型组件创建并动态添加它，这样每一行就不会有5*ngIf，但是当你想重新加载一些单元格时，你必须重新加载每个单元格，这样可能会成为性能瓶颈，所以这个地方就是数据网格的地方，你说，我不需要，我应该为每一行创建组件，然后*ngIf在该行组件上重复。我认为这并不能提高效率。请关闭，在HTML文件中这样想，您是模板插入的“锚”点，如

。然后在*.ts文件中，您必须通过

ViewChild

抓住这个锚，然后遍历行并检查

row type

，就像在中后期使用ViewChild方法的

insert

将相应的

组件

插入到

row type

视图中一样。请注意，

dynamicali

插入视图中的每个组件都必须在模块中声明为

entryComponent

以及

声明中声明。仔细阅读我在上面发表的这篇文章。