Angular循环组件

Angular循环子组件

然后筛选出自己想要的那一个，注意：
单个的子组件是@ViewChild，多个是@ViewChildren，
监听类型是QueryList<ChildComponent>

<app-child #app *ngFor="let item of list, let i = index" [singleHero]="item"></app-child>

<app-child #single [single]="person"></app-child>

// import { Ser3Service } from './../Service/ser3.service';
// import { Ser2Service } from './../Service/ser2.service';
// import { Ser1Service } from './../Service/ser1.service';
// import { Ser4Service } from './../Service/ser4.service';
// import { Ser5Service } from './../Service/ser5.service';
// import { Ser6Service } from './../Service/ser6.service';

import { Ser7Service } from './../Service/ser7.service';
import { Ser8Service } from './../Service/ser8.service';

import { MyService } from './my.service';

import { ChildComponent } from './../child/child.component';
import { Component, OnInit,ViewChild,ElementRef,ViewChildren,QueryList,Injector  } from '@angular/core';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.less']
})
export class MainComponent implements OnInit {

@ViewChildren('app') childs!: QueryList<ChildComponent>;

@ViewChild('single', {static: true}) single: any;

  constructor() { }

  ngOnInit(): void {
    this.list = ["hero1","hero2","hero3","hero4","hero5"]
  }

  show(){
        console.log(this.childs.filter(x => x.singleHero =="hero2"));
  }
}