如何在 Angular 2 中刷新组件的模板？

Question

我是 Angular 2 的新手（现在正在学习英雄之旅教程），我创建了一个组件，该组件具有双向数据绑定到在模板中显示为列表的对象数组。我已经连接了一个单击事件，以便当单击列表项时，与列表项关联的对象存储为一个名为 selectedItem 的属性，并调用一个显示所选项目详细信息的子组件。典型的主/细节的东西。

但是，我希望模板中的项目列表重新加载新的项目列表，而不是在单击事件上显示详细信息。我有一个小服务知道如何获取我想要的新列表，但我不知道如何重新加载组件或刷新模板以显示新的项目列表。

我的对象数组如下所示：(scriptID, scriptName, scriptOrderID, scriptParentID)。数组中的每个对象都有一个 scriptParentID，它是数组中另一个对象的 scriptID。当我单击一个列表项时，我的新列表是其 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

您应该将 script.scriptID 传递给 getScriptsByParentID 方法，而不是传递 script.scriptParentID。它是作为父元素的被点击元素的 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));
    }
}