带有嵌套组件的 Angular *ngFor

Question

所以我得到了一个父组件，其中有另一个子组件。我想在子组件内的父组件中使用我从 ngFor 获得的数据。

示例：

父组件

<div *ngFor= "let item of items"> 
 item name in parent component: {{item.name}}
<child-component></child-component>
</div>

子组件

<div> item name in child component {{item.name}}</div>

我希望你得到我想要的！

有

Answer 1

正如@pzaenger 在评论中提到的，如果您想将参数传递给您的子组件，您应该使用 @Input()。

<!-- On the parent.component.html -->
<child-component *ngFor="let i of items" [item]="i"></child-component>

// On the child component TS file
@Component({...})
export class ChildComponent {
  @Input() public item: YourType;
}

<!-- On the template file -->
<h1>Some text and {{item.property}}</h1>

如果您想将 HTML 内容传递给您的子组件，请使用此模式：

<!-- On the parent.component.html -->

<child-component *ngFor="let i of items">
    item name in child component {{item.name}}
</child-component>

<!-- on the child.component.html -->
<div class="your-classes-here">
    <ng-content></ng-content>
</div>

Answer 2

您可以通过在子组件上创建一个 @Input() 变量，然后将数据传递给模板中的该变量，将数据从父组件传递给子组件。

这是父组件。它的模板有子组件。如图所示，它有一个名为 item 的属性，它与子组件上的属性名称相匹配。

注：为了更容易理解，我重命名了let变量。

@Component({
  selector: 'parent-component',
  template: `<div *ngFor= "let parentItem of items"> 
    item name in parent component: {{parentItem.name}}
    <child-component [item]="parentItem"></child-component>
  </div>`
})
export class ParentComponent {
  items = [{name: 'Hello World'}]
}

这里我们有我们的子组件。它有一个属性 item 附加到 @Input()。输入告诉子组件该值可能来自在其模板中使用该组件的组件的属性。

@Component({
  selector: 'child-component',
  template: `<div> item name in child component {{item.name}}</div>`
})
export class ChildComponent {
  @Input()
  item = { }
}

带有嵌套组件的 Angular *ngFor

Angualr *ngFor with nested component

angular

ngfor