Question

我想在实例的属性上应用forEach（）方法，该属性属于＆＃39; QueryList＆＃39;。但是当试图访问任何属性的方法时，实例似乎已经改变了。

我做错了什么？

app.component.html

<switcher>
   <item label="Male" value="male"></item>
   <item label="Female" value="female"></item>
</switcher>

switcher.component，TS

...
@Component({
   selector: 'switcher',
   template: `
      <button *ngFor="let item of items; let i = index"
      (click)="selectItem(item)">{{item.label}}</button>
   `,
})

export class SwitcherComponent {
   @ContentChildren(ItemComponent) items: ItemComponent;

   selectItem(selectedItem): void {
      console.log(this.constructor.name); //SwitcherComponent
      console.log(this.items.constructor.name); //QueryList

      this.items.forEach(function(){}) //ERROR: Property 'forEach' does not exist on type 'ItemComponent'
      for (let item of this.items) {}  //ERROR: Property 'forEach' does not exist on type 'ItemComponent'
   }
}

item.component.ts （不太重要）

...
@Component({
   selector: 'item',
   template: `<button><ng-content></ng-content></button>`
})

export class ItemComponent {
   @Input() label: string;
   @Input() value: any;
   selected: false;
}

Answer 1

您输入的项目是＆＃34; ItemComponent＆＃34;，而不是ItemComponents的QueryList。 TypeScript接受你的话（即使你的代码显示的不是它的指定类型），所以这种类型没有forEach它是对的。

@ContentChildren(ItemComponent) items: QueryList<ItemComponent>;

尝试访问属性方法时实例已更改

1 个答案: