Angular NG-FOR e NG-IF

Question

Estou tentando criar uma barra de navegação lateral com links dinâmicos, mas está ocorrendo um erro.

component.ts

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

@Component({
  selector: 'pl-access-full',
  templateUrl: './access-full.component.html',
  styleUrls: ['./access-full.component.css']
})
export class AccessFullComponent implements OnInit {

  public teamSales = ['Corporate', 'SP Large', 'RJ Large', 'GAM'];

  public accountManagers = [
    {team: 'Corporate', name: 'Bugnaro'},
    {team: 'Corporate', name: 'Allan'},
    {team: 'Corporate', name: 'Vinícius'},
    {team: 'SP Large', name: 'Wanderson'},
    {team: 'SP Large', name: 'Alberto'},
    {team: 'SP Large', name: 'Cristiano'},
    {team: 'RJ Large', name: 'Marfil'},
    {team: 'RJ Large', name: 'Marini'},
    {team: 'RJ Large', name: 'Pitta'},
    {team: 'GAM', name: 'Luciano'},
    {team: 'GAM', name: 'Magda'},
    {team: 'GAM', name: 'Érico'}
  ]

  constructor() { }

  ngOnInit() {
  }

}

component.html

<ng-container *ngFor="let teamSale of teamSales">
  <h6>{{ teamSale }}</h6>
  <nav class="nav flex-column">
      <a class="nav-link" *ngFor="let accountManager of accountManagers">
        <ng-container *ngIf="accountManager.team === teamSale"> {{ accountManager.name }}</ng-container>
      </a>
    </nav>
</ng-container>

Mas o resultado final não é o espero. Parece que ele gerou linhas em branco.
Gostaria que não houvessem linhas em branco.

angular angularjs directives bootstrap 4 typescript

Mas o resultado final não é o espero. Parece que ele gerou linhas em branco. Gostaria que não houvessem linhas em branco.

wldomiciano · Answer

Uma possibilidades seria primeiro separar seu array por time.

Seu componente ficaria assim:

import { Component } from '@angular/core';

@Component({
  selector: 'pl-access-full',
  templateUrl: './access-full.component.html'
})
export class AccessFullComponent {
  private readonly teamSales = ['Corporate', 'SP Large', 'RJ Large', 'GAM'];

  private readonly accountManagers = [
    {team: 'Corporate', name: 'Bugnaro'},
    {team: 'Corporate', name: 'Allan'},
    {team: 'Corporate', name: 'Vinícius'},
    {team: 'SP Large', name: 'Wanderson'},
    {team: 'SP Large', name: 'Alberto'},
    {team: 'SP Large', name: 'Cristiano'},
    {team: 'RJ Large', name: 'Marfil'},
    {team: 'RJ Large', name: 'Marini'},
    {team: 'RJ Large', name: 'Pitta'},
    {team: 'GAM', name: 'Luciano'},
    {team: 'GAM', name: 'Magda'},
    {team: 'GAM', name: 'Érico'}
  ];

  public managersByTeams = {};

  constructor() {
    this.teamSales.forEach(team => {
      const temp = this.accountManagers.filter(f => f.team === team);
      this.managersByTeams[team] = temp;
    });
  }
}

E o template:

<ng-container *ngFor="let teamSale of teamSales">
    <h6>{{ teamSale }}</h6>
    <nav class="nav flex-column">
      <a class="nav-link" *ngFor="let manager of managersByTeams[teamSale]">
        {{ manager.name }}
      </a>
    </nav>
</ng-container>

Angular NG-FOR e NG-IF

One Answer

Add your own answers!

Ask a Question