0
I am trying to create a sidebar with dynamic links, but there is an error.
Component.
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>
But the end result is not what I expect. It seems that it generated blank lines. I wish there were no blank lines.
It seems that your data structure is wrong. You have to use the filter to create the arrays for each separate type.
– Eduardo Vargas