Stack Overflow em Português Asked by Leonardo Vinicius on October 21, 2020
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.
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>
Answered by wldomiciano on October 21, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP