我有一个父组件，它通过输入向子组件发送一个对象，但这个对象有一个带有标题的字段和另一个包含数组的按钮字段。
当我这样做的时候，标题出现的次数和它存在的次数一样多，所以假设我有3个按钮，在子组件中标题也会出现3次，这是第一点。

dados: IHeaderTitlePage = {
    title: 'Caption List'
    botoes: [
      {
        name: 'Parametrizações',
        icon: 'configuracao_outline',
        iconPosition: 'left',
        router: '../parametrizacao'
      },
      {
        name: 'Empresas',
        icon: 'empresas_outline',
        iconPosition: 'left',
        router: '/'
      },
      {
        name: 'adicionar',
        icon: 'adicionar',
        iconPosition: 'left',
        router: '../cadTecnico'
      }
    ]
  };

<app-header-title-page *ngFor="let dado of dados"  [dados]="dado"  [titulo]="titulo"></app-header-title-page>

另一点是，当尝试使用路由附带的[routerlink]="[variable name]”时，它不起作用，并给出错误。
因此，我需要标题只出现一次，而按钮出现的数组数量与按钮字段中存在的数组数量相同，并且具有功能。
这是一个页眉，我将在所有页面上使用它，以免重复，因为在一个页面上我不传递按钮，在另一个页面上我可以传递一个或两个按钮。
而且数据总是会被发送到父节点，它不会来自银行。
在子组件中，如下所示：

<section class="row flex-container">

  <article class="col-6">
    <div class="menu">
      <h3 class="voxel-text-insight-bold voxel-color-text-heading-2" id="titulo">{{titulo}}</h3>
    </div>
  </article>

  <article class="col-6">
    <div class="butttons_config">
      <button  iconPosition="data.iconPosition" [routerLink]="[data.rota]">
        <icon>{{data.icon}}</icon>{{data.nome}}
      </button>
    </div>
  </article>

</section>

就像我说的，这会产生和按钮一样多的线条。
我尝试将数据传递给子组件而不执行for，如下所示：

<app-header-title-page   [dados]="dados" ></app-header-title-page>

在子组件本身中，根据我尝试的以下方法执行for：

<section class="row flex-container">
  <article class="voxel-col-6">
    <div class="menu">
      <h3 class="voxel-text-insight-bold voxel-color-text-heading-2" id="titulo">{{dados.nome}}</h3>
    </div>
  </article>

  <article class="col-6">
    <div class="butttons_config" *ngFor="let butons of dados">
      <button iconPosition="butons.botoes.iconPosition" [routerLink]="['butons.botoes.rota']">
        <icon>{{butons.botoes.icon}}</icon>{{butons.botoes.nome}}
      </button>
    </div>
  </article>

</section>

<section class="row flex-container">
  <article class="voxel-col-6">
    <div class="menu">
      <h3 class="voxel-text-insight-bold voxel-color-text-heading-2" id="titulo">{{dados.nome}}</h3>
    </div>
  </article>

  <article class="col-6"  *ngFor="let butons of dados">
    <div class="butttons_config">
      <button iconPosition="butons.botoes.iconPosition" [routerLink]="['butons.botoes.rota']">
        <icon>{{butons.botoes.icon}}</icon>{{butons.botoes.nome}}
      </button>
    </div>
  </article>

</section>

<section class="row flex-container">
  <article class="voxel-col-6">
    <div class="menu">
      <h3 class="voxel-text-insight-bold voxel-color-text-heading-2" id="titulo">{{dados.nome}}</h3>
    </div>
  </article>

  <article class="col-6" >
    <div class="butttons_config">
      <button  *ngFor="let butons of dados"  iconPosition="butons.botoes.iconPosition" [routerLink]="['butons.botoes.rota']">
        <icon>{{butons.botoes.icon}}</icon>{{butons.botoes.nome}}
      </button>
    </div>
  </article>

</section>

它不会在屏幕或控制台上显示错误，但是，它不会在屏幕上呈现任何内容，所有内容都是白色的。
总之，这个子组件只是页面的一个页眉，包含页面的标题和按钮（如果它有注册按钮的话）。
我的css，我用的是flexbox，我把标题放在左边，按钮放在右边。