时间戳

首页 > 解决方案 > 在没有指令选择器的表中创建自定义组件

angular - 在没有指令选择器的表中创建自定义组件

问题描述

我制作了一个自定义行组件，<td>里面有一些 's。它与指令选择器一起使用，但我在我的项目中激活了 tslint，它抛出了我无法在组件中使用指令选择器的错误。

我不想禁用它，所以我试图将其更改为组件选择器。但是当使用组件选择器时，表格布局会中断。

这个问题有解决方案还是我必须禁用检查？

我尝试使用<ng-container>但它不是我需要的（我认为）

自定义组件：

<td>{{getProductName(neighbour)}}</td>
<td>{{getVersion(neighbour)}}</td>
<td>{{getProjectName()}}</td>
<td>{{neighbour.ip}}</td>
<td>{{neighbour.mac}}</td>
<td>{{mapHardwareType(neighbour)}}</td>
<td>
    <button [disabled]="!reachable" class="btn btn-sm btn-primary" (click)="open()">
        <i class="fa fa-external-link"></i> <span [translate]="'OPEN'"></span>
    </button>
</td>

桌子：

<table class="table table-default table-responsive">
      <thead>
            <tr>
                <th [translate]="'PRODUCT'"></th>
                <th [translate]="'VERSION_AND_DATE'"></th>
                <th [translate]="'PROJECT_NAME'"></th>
                <th [translate]="'IP'"></th>
                <th [translate]="'MAC'"></th>
                <th [translate]="'HARDWARE'"></th>
                <th></th>
            </tr>
      </thead>
      <tbody>
            <ng-container *ngFor="let n of neighbours|filter:{keys: searchKeys, str: search}">
                <tr>
                    <app-neighbour-row [neighbour]="n"></app-neighbour-row>
                </tr>
            </ng-container>

      </tbody>
</table>

标签： angularhtml-table

解决方案

我认为你的组件有两个缺点。

  1. 我没有包含任何您想重用的好功能。
  2. 它分解了 html 标记。和无论如何都是硬耦合的<th>。<td>

我建议您删除该组件并使用以下代码：

<table class="table table-default table-responsive">
      <thead>
            <tr>
                <th [translate]="'PRODUCT'"></th>
                <th [translate]="'VERSION_AND_DATE'"></th>
                <th [translate]="'PROJECT_NAME'"></th>
                <th [translate]="'IP'"></th>
                <th [translate]="'MAC'"></th>
                <th [translate]="'HARDWARE'"></th>
                <th></th>
            </tr>
      </thead>
      <tbody>
                <tr *ngFor="let neighbour of neighbours|filter:{keys: searchKeys, str: search}">
                  <td>{{getProductName(neighbour)}}</td>
                  <td>{{getVersion(neighbour)}}</td>
                  <td>{{getProjectName()}}</td>
                  <td>{{neighbour.ip}}</td>
                  <td>{{neighbour.mac}}</td>
                  <td>{{mapHardwareType(neighbour)}}</td>
                  <td>
                      <button [disabled]="!reachable" class="btn btn-sm btn-   primary" (click)="open(neighbour)">
                      <i class="fa fa-external-link"></i> <span [translate]="'OPEN'"></span>
                     </button>
                  </td>
                </tr>    
      </tbody>
</table>

它更容易理解和改变。对html的影响较小。如果您在循环之前在组件中准备邻居列表数据，则可以删除 getProductName、getVersion 和 getProjectName。Rxjs 在这方面有一些很酷的功能

推荐阅读