Question

我正在尝试在Angular 2的父组件中循环子组件，如下所示，

<segment-header>
</segment-header>
<segment-content *ngFor="let content of listContent">
</segment-content>

其中listContent是json数组。因此内容是json对象，相同的内容应该是这样的。

<div class="segment-content-class">
    {{content.code}} = {{content.value}}
</div>

我的问题是，如果我在子内容中循环它工作正常但是如果我在父级中循环并尝试获取内容对象并在子级中显示它不起作用。

Answer 1

您应该在angular2中使用内容投影来实现此目的，

<强> AppComponent

<div>
      <segment-header></segment-header>
      <segment-content *ngFor="let content of listContent">
        <div class="segment-content-body"> 
         {{content.code}} = {{content.value}}
        </div>
      </segment-content>
</div>

<强> SegmentHeaderComponent

@Component({
  selector: 'segment-header',
  template: `
    <div> Header </div>
  `,
})
export class SegmentHeaderComponent {}

<强> SegmentContainerComponent

@Component({
  selector: 'segment-content',
  template: `
    <div>
      <ng-content select=".segment-content-body"> </ng-content>

    </div>
  `,
})
export class SegmentContentComponent {}

<强> LIVE DEMO

angular 2循环子组件获取值作为内容

1 个答案: