僅更新* ngFor數組Angular2中的選定數組項

Question

我有一個* ngFor循環來顯示庫。 當您單擊庫時，該庫的類別將以樹狀結構顯示在下方。 類別也通過* ngFor循環顯示。 當我擴展了一個庫並單擊另一個庫時，兩個庫中的類別都將更新為剛剛單擊的庫中的類別。 我正在尋找的功能是僅更新所選的庫類別，而讓其他類別保持獨立。 這里有一篇帖子似乎與我的問題很接近，但我無法使它正常工作。

使用* ngFor遍歷數組，使用* ngIf選擇數組中要列出的元素

這是我的代碼：

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

如果與NgFor一起使用trackBy會很好