Javascript （Angular 2+；）在*ngFor中使用ng内容，无法访问循环变量

如何将/project转换到循环中的插槽中，并使投影内容能够访问循环变量

假设我有一个具有以下内容的基本组件

<tr *ngFor="let data of items">
    <td>{{data.title}}</td>
    <ng-content select="[slot]"></ng-content>
</tr>

{{data.title}

以及使用转换槽“槽”的子组件

{{data.category}
{{data.number}

我想要生成的HTML是

<tr>
    <td>{{data.title}}</td>
    <td>{{data.category}}</td>
    <td>{{data.number}}</td>
</tr>

{{data.title}
{{data.category}
{{data.number}

---

但实际发生的是“数据”没有在子组件中定义，这是有道理的。有什么方法可以让它这样工作吗？

使用

TemplateRef

可以在模板级别声明在两个组件之间起作用的模板变量。以下解决方案与您的“插槽”基础结构不完全匹配，但可能有助于进一步调查

列表.组件.ts

import { Component, Input, ContentChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'list',
  template: `
    <tr class="box" *ngFor="let data of items">
      <td>{{data.title}}</td>
      <ng-template
        [ngTemplateOutlet]="template"
        [ngTemplateOutletContext]="{ $implicit: data }">
      </ng-template>
    </tr>`
})
export class ListComponent {
  @Input() items;
  @ContentChild(TemplateRef) template: TemplateRef;
  constructor() { }
}

import { Component, ContentChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'wrapper',
  template: `
    <table>
      <list [items]="items">
        <ng-template let-data>
          <td>{{data.category}}</td>
          <td>{{data.number}}</td>
        </ng-template>
      </list>
    </table>`
})
export class WrapperComponent {
  items = [
    { title: 'T1', category: 'C1', number: 'N1' },
    { title: 'T2', category: 'C2', number: 'N2' },
    { title: 'T3', category: 'C3', number: 'N3' }
  ];
  @ContentChild(TemplateRef) template: TemplateRef;
  constructor() { }
}

从'@angular/core'导入{Component，Input，ContentChild，TemplateRef}；
@组成部分({
选择器：“列表”，
模板：`
{{data.title}
`
})
导出类ListComponent{
@输入（）项；
@ContentChild（TemplateRef）模板：TemplateRef；
构造函数（）{}
}

包装器.component.ts

import { Component, Input, ContentChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'list',
  template: `
    <tr class="box" *ngFor="let data of items">
      <td>{{data.title}}</td>
      <ng-template
        [ngTemplateOutlet]="template"
        [ngTemplateOutletContext]="{ $implicit: data }">
      </ng-template>
    </tr>`
})
export class ListComponent {
  @Input() items;
  @ContentChild(TemplateRef) template: TemplateRef;
  constructor() { }
}

import { Component, ContentChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'wrapper',
  template: `
    <table>
      <list [items]="items">
        <ng-template let-data>
          <td>{{data.category}}</td>
          <td>{{data.number}}</td>
        </ng-template>
      </list>
    </table>`
})
export class WrapperComponent {
  items = [
    { title: 'T1', category: 'C1', number: 'N1' },
    { title: 'T2', category: 'C2', number: 'N2' },
    { title: 'T3', category: 'C3', number: 'N3' }
  ];
  @ContentChild(TemplateRef) template: TemplateRef;
  constructor() { }
}

从'@angular/core'导入{Component，ContentChild，TemplateRef}；
@组成部分({
选择器：“包装器”，
模板：`
{{data.category}
{{data.number}
`
})
导出类包装器组件{
项目=[
{标题：'T1'，类别：'C1'，编号：'N1'}，
{标题：'T2'，类别：'C2'，编号：'N2'}，
{标题：'T3'，类别：'C3'，编号：'N3'}
];
@ContentChild（TemplateRef）模板：TemplateRef；
构造函数（）{}
}

---

我还创建了一个…

在哪里调用子组件？@developer033我在另一个组件中调用子组件。因此，

子组件通过xhr获取进入项的数据，并将其传递给父组件，如下所示：{{data.category}{{data.number}完全正确。我正在尝试将“数据”——循环变量输入到子组件中，就像你通常在twig中一样。例如，听起来你想要这样：@RudolfOlah我看过那个教程。我使用的是多时隙转换/投影，但这里的问题是，我使用的是循环中的时隙。