时间戳

首页 > 解决方案 > 如何通过从父级到子级输入数组来在 Angular 11 中创建菜单

angular - 如何通过从父级到子级输入数组来在 Angular 11 中创建菜单

问题描述

我正在尝试创建一个带有 2 个选项卡的菜单，我在父级中定义了这个数组

public labelArray: string[]=[''];

  constructor() { 
  this.labelArray =['tab1', 'tab2'];
}

我在子组件中调用了这个数组

@Input('tabs') public labelArray: any;

然后我把它放在 child.html

<div>
  {{labelArray}}
</div>

然后使用 ngFor 迭代数组索引

<div class="header-menu">
        <app-tabs [tabs]= "labelArray" *ngFor= 'let item of labelArray'></app-tabs>

但结果菜单是这样的：tab1,tab2 tab1,tab2

它应该是这样的：tab1 tab2

我应该如何解决这个问题？

标签： angular

解决方案

无需在 Parent 组件中使用 *ngFor。

<app-tabs [tabs]= "labelArray"></app-tabs>

如果你想使用 *ngFor，那么在子组件中使用它：

<div *ngFor= 'let item of labelArray'>
  {{item}}
</div>

推荐阅读