1

テンプレートと PrimeNg の TurboTable の間に新しい「レイヤー」を作成して、作成した追加の関数と機能を使用したいので、2 つng-templateを自分のコンポーネントに渡し、そこから に渡したいのですが、うまくいきp-tableません。

私の中でapp.component.html：

  <my-table>
    <ng-template #tableHeader pTemplate="header">
      <tr>
        <th>Vin</th>
        <th>Color</th>
        <th>Year</th>
      </tr>
    </ng-template>
    <ng-template #tableBody pTemplate="body" let-rowData>
      <tr>
        <td>{{rowData.vin}}</td>
        <td>{{rowData.color}}</td>
        <td>{{rowData.year}}</td>
      </tr>
    </ng-template>
  </my-table>

でmy-table.component.html：

<p-table [value]="cars" sortField="brand" sortMode="single">
  <ng-template [ngTemplateOutlet]="tableHeader" ></ng-template>
  <ng-template [ngTemplateOutlet]="tableBody"></ng-template>
</p-table>

my-table.component.ts私はこれらを持っています：

  @ContentChild('tableHeader')
  private tableHeader: TemplateRef<any>;

  @ContentChild('tableBody')
  private tableBody: TemplateRef<any>;

私が得るエラー：

ERROR TypeError: Cannot read property 'vin' of undefined.

from をp-table使用できないのはなぜですか? 解決策はありますか？let-rowDataapp.component.html

4

1 に答える 1

1

私は同じ問題を抱えており、私の解決策があります：

  1. my-table.component.ts では、QueryList を使用してすべてのテンプレートを登録しました。
    @ContentChildren(PrimeTemplate)
    templates: QueryList<any>;
  1. my-table.component.html 内
    <p-table [value]="data">
            <ng-template let-item [pTemplate]="template.name" *ngFor="let template of templates">
              <ng-template *ngTemplateOutlet="template.template; context: { $implicit: item }"></ng-template>
            </ng-template>
        </p-table>
  1. 最後に、私のショーケースは次のようになります。
    <hn-table [data]="cars">
            <ng-template pTemplate="header">
                <tr>
                    <th>Vin</th>
                    <th>Year</th>
                    <th>Brand</th>
                    <th>Color</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-item>
                <tr>
                    <td>{{item.vin}}</td>
                <td>{{item.year}}</td>
                <td>{{item.brand}}</td>
                <td>{{item.color}}</td>
            </tr>
        </ng-template>
        <ng-template pTemplate="summary">
            summary!!
        </ng-template>
      </hn-table>

より良い解決策があると確信していますが、これは私が見つけたものです。これがあなたと誰かがより良い解決策を見つけるのに役立つことを願っています.

于 2018-02-07T11:59:44.647 に答える