只更新* ngFor数组中的选定数组项目Angular2

Question

我有一个* ngFor循环来显示库。当你点击一个图书馆时，该图书馆的类别出现在树状结构下面。类别也正在用* ngFor循环显示。当我扩展了一个库并单击另一个时，BOTH库中的类别将更新为刚刚单击的库中的类别。我正在寻找的功能是只更新选定的库类别，并让其他人单独使用。这里有一篇文章似乎与我的问题很接近，但我无法使其发挥作用。

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

这里是我的代码：

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; 

    } 

库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> 

树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 
    } 

与

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

被取代，如果你使用trackBy与NgFor