Question

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

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

我的对象数组如下所示：（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，而不是将script.scriptParentID传递给getScriptsByParentID方法。它是作为父级的被点击元素的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));
    }
}

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

1 个答案: