Используйте ngFor в таблице внутри ng-template

Я пытаюсь выполнить итерацию по списку, который я получаю из API-запроса, и вставляю данные в таблицу. Моя проблема в том, что эта таблица находится внутри тега ng-template, и я не знаю, как с этим справиться.

Это мой код:

<ng-template>
  <table>
    <thead>
      <tr>
        <th>Reference</th>
        <th>Chapter</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let ref of data">
        <td>{{ref.title}}</td>
        <td>{{ref.chapter}}</td>
      </tr>
    </tbody>
  </table>
</ng-template>

И это моя цель: Popover


angular ngfor ng-template
person swissmount    schedule 30.04.2021    source источник
comment
Почему это внутри ng-template?   -  person Sam    schedule 30.04.2021
comment
Потому что это должно быть во всплывающем окне   -  person swissmount    schedule 30.04.2021

Ответы (2)


arrow_upward
1
arrow_downward

Это решение для вашей проблемы:

введите здесь описание изображения

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<table>
  <thead>
    <tr>
      <th>Reference</th>
      <th>Chapter</th>
    </tr>
  </thead>
  <tbody>
    <ng-template ngFor let-ref [ngForOf]="data">
      <tr>
        <td>{{ref.title}}</td>
        <td>{{ref.chapter}}</td>
      </tr>
    </ng-template>
  </tbody>
</table>

и машинописный код:

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  data = [
    {
      title: "title 1",
      chapter: "chapter1"
    },
    {
      title: "title 2",
      chapter: "chapter2"
    }
  ];
}
person rassakra    schedule 30.04.2021
comment
Вы можете добавить код напрямую, а не скриншот. - person phhbr; 30.04.2021
comment
Я добавил исходный код, вы можете проверить его. - person rassakra; 30.04.2021
comment
В этом примере только tr находится внутри шаблона ng. Но мой вопрос в том, возможно ли, чтобы вся таблица находилась внутри ng-шаблона? - person swissmount; 03.05.2021

arrow_upward
0
arrow_downward

Если у вас есть переменная yourVariable

В общем, вы можете иметь

<ng-template #template1>
.... e.g. {{yourVariable|json}}..
</ng-template>

И использовать

<ng-container *ngTemplateOutlet="template1"></ng-container>

Вы также можете использовать

<ng-template #template2 let-data >
.... e.g. {{data|json}}..
</ng-template>

и вы указываете в *ngTemplateOutlet контекст

<ng-container *ngTemplateOutlet="template2; context:{$implicit:yourVariable}">
</ng-container>

Посмотрите, что в этом случае внутри данных шаблона вы переменная

Я не знаю о вашем всплывающем окне, но уверен, что вам нужна переменная ссылки на шаблон для вашего шаблона (#template1 и #template2 в приведенном выше коде)

person Eliseo    schedule 30.04.2021