Nur ausgewählte Array-Elemente in * ngFor aktualisieren Array Angular2

Question

Ich habe eine * ngFor-Schleife, um Bibliotheken anzuzeigen. Wenn Sie auf eine Bibliothek klicken, werden Kategorien dieser Bibliothek darunter in einer baumartigen Struktur angezeigt. Die Kategorien werden auch mit einer * ngFor-Schleife angezeigt. Wenn ich eine Bibliothek erweitert habe und auf eine andere Bibliothek klicke, werden die Kategorien in BOTH-Bibliotheken auf die Kategorien in der Bibliothek aktualisiert, auf die gerade geklickt wurde. Die Funktionalität, nach der ich suche, besteht darin, nur die ausgewählten Bibliothekskategorien zu aktualisieren und die anderen in Ruhe zu lassen. Es gibt hier einen Beitrag, der meinem Problem nahe zu sein scheint, aber ich konnte es nicht zum Laufen bringen.

Using *ngFor to loop through an array and *ngIf to select which elements from the array to list

Hier ist mein Code:

library.component.html

<div *ngFor="let messageLibrary of onHoldMessageLibraryService.data" class="library mgn-top10 ft-size14">   
    <a (click)="onHoldMessageLibraryService.getSelectedMessageLibrary(messageLibrary)"><i class="fa fa-folder-o mgn-right10" aria-hidden="true"></i>{{messageLibrary.Name}}</a> 
    <library-category *ngIf="messageLibrary.treeIsExpanded" (displayMessagesFromSelectedCategory)="getOnHoldMessages()"></library-category> 
</div> 

library.service

public treeIsExpanded: boolean; 
public selectMessages: boolean; 
public data: TreeData[]; 
public selectedName: string; 
public selectedValue: number; 


public getSelectedMessageLibrary(messageLibrary): void { 
    this.selectedMessagesLibrary = messageLibrary; 
    this.selectedMessagesLibrary.treeIsExpanded = !this.selectedMessagesLibrary.treeIsExpanded; 
    } 



public dummyData(): void { 
    let myTree: TreeData[] = new Array(); 
    myTree.push(
    { 
     Name: 'Banking Library', 
     Id: 1, 
     Category: [{ 
     Name: 'Credit Cards', 
     Id: 11, 
     Category: null 
     }] 
    }, 
    { 
     Name: 'Automobile Library', 
     Id: 2, 
     Category: [{ 
     Name: 'Cars', 
     Id: 12, 
     Category: null 
     }] 
    }, 
    { 
     Name: 'Coffee Library', 
     Id: 3, 
     Category: [{ 
     Name: 'Americano', 
     Id: 13, 
     Category: null 
     }] 
    } 
    ) 

    this.data = myTree; 

    } 

Bibliothek-category.component.html

<ul *ngFor="let category of onHoldMessageLibraryService.selectedMessagesLibrary.Category"> 
    <li><i class="fa fa-folder-o mgn-right10" aria-hidden="true"></i>{{category.Name}}</li> 
</ul> 

Baum data.ts

export class TreeData { 
Name: string; 
Id: number; 
Category: TreeData[]; 

}

Answer 1

public getSelectedMessageLibrary(messageLibrary): void { 
    this.selectedMessagesLibrary = messageLibrary; 
    this.selectedMessagesLibrary.treeIsExpanded = !this.selectedMessagesLibrary.treeIsExpanded; //this line is not giving desired result 
    } 

zu mit

public getSelectedMessageLibrary(messageLibrary): void { 
    messageLibrary.treeIsExpanded = !messageLibrary.treeIsExpanded; 
    } 

ersetzt werden und es wird gut sein, wenn Sie trackBy mit NgFor