只更新* 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