Создание пользовательского компонента внутри таблицы без селектора директив - PullRequest
Новая
       14

Создание пользовательского компонента внутри таблицы без селектора директив

1 голос
/ 19 сентября 2019

Я сделал пользовательский компонент строки с некоторыми элементами <td> внутри.Он работал с селектором директив, но я активировал 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>

1 Ответ

0 голосов
/ 19 сентября 2019

Я думаю, у вашего компонента есть два недостатка.

  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 получил несколько интересных функций на этом

...