Ich habe eine App, die ich in Angular 2 (RC1) entwickeln. Das Menü muss aus der Datenbank erstellt werden. Daten werden über Web Api in JSON-Form geliefert. Ich möchte Menü aus den Daten rekursiv erstellen, um sicherzustellen, dass die Tiefe des Menüs kein Problem ist.Style in ngFor Schleife
Das Problem ist, wenn ich Klasse für bestimmte Zeile von ngFor Schleife hinzufügen möchte, und die Klasse wird zu allen Zeilen hinzugefügt, anstatt nur eine, die ich möchte.
Der Code ist auf der Suche etwas wie folgt aus:
sidenav.component.ts
import { Component, Input } from '@angular/core';
import { IMenu } from '../../../shared/models/menu.interface';
import { MenuComponent } from './menu.component';
@Component({
moduleId: module.id,
selector: 'sidenav',
templateUrl: 'sidenav.component.html',
directives: [MenuComponent]
})
export class SidenavComponent {
@Input() menu: IMeni[]
}
sidenav.component.html
...
<menu-view [menu]="menu"></menu-view>
...
menu.component.ts
import { Component, Input } from '@angular/core';
import { IMenu } from '../../../shared/models/menu.interface';
@Component({
moduleId: module.id,
selector: 'menu-view',
templateUrl: 'menu.component.html',
directives: [MenuComponent]
})
export class MenuComponent {
isSelected: boolean = false;
@Input() meni: IMeni[];
onSelect(): void {
this.isSelected = !this.isSelected;
}
}
menu.component.html
<ul>
<li *ngFor="let item of menu; let frst=first"
class="menu-list"
[ngClass]="{'active': 'isSelected', 'active': 'frst'}">
<a [routerLink]="[item.uri]" (click)="onSelect()" > {{item.name}}</a>
<meni-view [menu]="item.children"></meni-view>
</li>
</ul>
Also, wenn ich auf die Eltern klicken, um alle Eltern aktiv werden, nicht nur, dass insbesondere ein, was befriedigend Verhalten sein. Was ich falsch mache?
Was meinen Sie mit „auf Eltern klicken alle Eltern werden aktiv"? Sollte dies sein "klicken Sie auf Eltern alle' MenuComponent' werden aktiv "? –
Wenn das Menü erstellt wird, gibt es eine Hierarchie von übergeordneten und untergeordneten Elementen. Nehmen wir an, das Modell für das Menü lautet: ID: Nummer; parentId: Nummer; Name: Zeichenfolge; Kinder: IMenu []; '. Wenn ich also auf die Elterninstanz des Menüelements klicke, öffne ich alle Instanzen der Elternmenüs. Das gewünschte Verhalten sollte sein, dass, wenn ich auf die Elterninstanz klicke, es sich öffnet, oder um nur die korrekte Klasse anzugeben, die mit Kindern des ausgewählten Elternteils blockiert werden soll. –