コンポーネントのテンプレートを角度2でどのように更新しますか？

Question

私はAngular 2（Tour of Heroesチュートリアルを今行っています）を全く新しくしていて、テンプレートのリストとして表示されているオブジェクトの配列への双方向データバインディングを持つコンポーネントを作成しました。私は、リストアイテムがクリックされると、リストアイテムに関連付けられたオブジェクトがselectedItemというプロパティとして格納され、選択されたアイテムの詳細を示すサブコンポーネントが呼び出されるように、クリックイベントを配線しました。典型的なマスター/ディテール。

ただし、clickイベントで詳細を表示する代わりに、テンプレートのアイテムのリストにアイテムの新しいリストを再読み込みする必要があります。私は、私が望む新しいリストを入手する方法を知っている小さなサービスを持っていますが、コンポーネントのリロードやテンプレートのリフレッシュの方法を理解することができないため、新しいアイテムリストが表示されません。

オブジェクトの配列は、（scriptID、scriptName、scriptOrderID、scriptParentID）のようになります。配列内の各オブジェクトには、配列内の別のオブジェクトのscriptIDであるscriptParentIDがあります。リストアイテムをクリックすると、新しいリストはすべて、そのscriptParentIDがクリックされたアイテムのscriptIDであるすべてのオブジェクトになります。

私は、リストを表示するコンポーネントがあり、アイテムがリスト内でクリックされると、その子がリストに表示されます。

状態管理、コンポーネント、テンプレートの学習に役立つ簡単な練習ですが、わかりません。

<ul class="heroes"> 
<li *ngFor="let script of scripts" [class.selected]="script === selectedScript" (click)="onSelect(script)"> 
    <div class="container"> 
    <div class="left"> 
     <span class="badge">{{script.scriptOrderID}}</span> 
    </div> 
    <div class="center"> 
     <span>{{script.scriptName}}</span> 
    </div> 
    <div class="right"> 
     <span class="badge2">{{script.scriptID}}</span> 
    </div> 
    </div> 
</li> 

<my-script-detail [script]="selectedScript"></my-script-detail>

export class AppComponent implements OnInit { 
scripts: Script[]; 
selectedScript: Script; 
title = 'Sandbox'; 

constructor(private scriptService: ScriptService) {} 

ngOnInit(): void { 
    this.getScriptsByParentID(1); 
} 

onSelect(script: Script): void{ 
    this.selectedScript = script; 
    this.getScriptsByParentID(script.scriptParentID); 
} 

getScriptsByParentID(parentID: number): void { 
    this.scriptService.getScriptsByParentID(parentID).then(scripts => this.scripts = scripts); 
    } 
} 

Answer 1

代わりgetScriptsByParentIDメソッドにscript.scriptParentIDを渡すので、あなたはscript.scriptIDを渡す必要があります。これは親であるクリックされた要素のIDです。

scriptService.getScriptsByParentIDメソッドのコードは表示されませんが、すべてのスクリプトを取得する場合は、フィルタリングして子のみを取得する必要があります。

export class AppComponent implements OnInit { 

    scripts: Script[]; 
    selectedScript: Script; 
    title = 'Sandbox'; 

    constructor(private scriptService: ScriptService) { 
    } 

    ngOnInit(): void { 
     this.getScriptsByParentID(1); 
    } 

    onSelect(script: Script): void{ 
     this.selectedScript = script; 
     this.getScriptsByParentID(script.scriptID); 
    } 

    getScriptsByParentID(parentID: number): void { 
     this.scriptService.getScriptsByParentID(parentID).then(scripts => this.scripts = scripts.find(script=> script.scriptParentID === parentID)); 
    } 
}