在 ng-template 内的表中使用 ngFor

Question

我正在尝试遍历从 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

Answer 1

如果你有一个变量“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”）

Answer 2

这是您的问题的解决方案：

<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"
    }
  ];
}