0

我正在使用以下 Angular 标记创建多个 ModuleItemComponents:

<div #moduleItems *ngFor="let module of seriesItem.modules; let i = index">
    <app-module-item [videoModule]="module" ></app-module-item>    
</div>

以下代码位于相应的 .ts 文件中:

  @ViewChildren('moduleItems') moduleItems;

我在 ngAfterViewInit 事件中使用代码来尝试获取对每个 ModuleItemComponent 的引用:

ngAfterViewInit() {
   let items: [];
   items = this.moduleItems.map((m) => m.nativeElement.firstChild);
   items.forEach((m) => {
     const thisModule = (m as ModuleItemComponent);
     thisModule.onSelectionMade.subscribe((result: VideoModule) => {
       this.deselectOthers(result);
     });
   });
 }

但是,我在“.subscribe”行出现错误,因为 thisModule 的类型是 app-module-item,而不是 ModuleItemComponent。

在此处输入图像描述

我确定我做错了什么 - 只是不知道如何正确地做到这一点。任何帮助表示赞赏。

4

1 回答 1

1

您需要将变量引用放在<app-module-item>

<app-module-item #moduleItems ...>

但是在这种情况下,你可以使用自己的类名而忘记变量引用

@ViewChildren(ModuleItemComponent) moduleItems:QueryList<ModuleItemComponent>

你可以做

ngAfterViewInit()
{
 
   this.moduleItems.forEach(item=>{
        ..item is a ModuleItemComponent.. 
        ..you has access to all his properties..
        ..e.g. item.onSelectionMade.subscribe(....)
    })
}

看到类的名称不在引号之间-我假设类的名称是 ModuleItemComponent,否则更改为类的名称-

于 2020-12-14T20:25:34.977 回答