Javascript 操纵组件'；s DOM元素

我是angular的新手，我正在尝试根据组件的html模板实例的输入数据来操作该实例。我想取一个整数值，生成与在星级评定系统中看到的相同数量的星级（与html实体★相同）。我有一个父组件“RatingList”，它可以动态生成一个“RatingCard”，其中包含星级（如图所示）。我能够动态创建“评级卡”，在ngAfterViewInit期间，我尝试创建星级。我使用selectRootElement访问我想放置星星的元素，但它似乎只获取“评级卡”的第一个实例，然后将所有后续实例添加到该实例的星星评级中

我想知道什么是在评级卡实例中找到特定html标记并更新它的正确方法。我曾尝试使用ViewChild声明变量，但这似乎不起作用。我还想知道如何正确地插入一个星形的html实体。谢谢你的考虑

为了清晰起见，我删除了一些代码

评级-list.component.ts

import {Component, Input, OnInit, ComponentFactoryResolver, OnDestroy, ViewContainerRef, Type} from "@angular/core";
import { RatingCardComponent} from "../rating-card/rating-card.component"

let titles = ["Road to Perdition", "Cool Hand Luke"]
let ratings =  [7, 4];
@Component({
  selector: 'app-rating-list',
  template: '<ng-template appRatingHost></ng-template>'
})
export class RatingListComponent implements OnInit {

  constructor(private vf:ViewContainerRef, private componentFactoryResolver : ComponentFactoryResolver) {}

  ngOnInit(): void {
    this.loadComponents();
  }

  loadComponents() {

    for (let index = 0; index < 2; index++) {
      const componentFactory = 
 this.componentFactoryResolver.resolveComponentFactory(RatingCardComponent);

      const componentRef = this.vf.createComponent<RatingCardComponent>(componentFactory);

      const data = {imgUrl : urls[index], title : titles[index], rating : ratings[index]};

      componentRef.instance.data = data;
      
    }
  }

import { Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/core';


@Component({
  selector: 'app-rating-card',
  templateUrl: './rating-card.component.html',
  styleUrls: ['./rating-card.component.css']
})
export class RatingCardComponent implements OnInit {

  data : any;

  @ViewChild('#rating-header') rating_header? : ElementRef;

  constructor(private renderer : Renderer2, private el : ElementRef) { }



  ngOnInit(): void {
      
  }

  ngAfterViewInit()
  {
    this.setupRating(this.data.rating)
  }



  setupRating(size : Number) : void {
    for (let index = 0; index < size; index++) {
      let starContainer = this.renderer.createElement('span');
      let text = this.renderer.createText("&#9734;");
      
      this.renderer.addClass(starContainer, 'gold_full_star');
     
      this.renderer.appendChild(starContainer, text);

      const rating_header = this.renderer.selectRootElement("#rating-header", true);

      this.renderer.appendChild(rating_header, starContainer);
    }
  }

}

import{Component，Input，OnInit，ComponentFactoryResolver，ondestory，ViewContainerRef，Type}来自“@angular/core”；
从“./rating card/rating card.component”导入{RatingCardComponent}
让标题=[“毁灭之路”，“酷手路加”]
让评级=[7,4]；
@组成部分({
选择器：“应用程序分级列表”，
模板：“”
})
导出类RatingListComponent实现OnInit{
构造函数（私有vf:ViewContainerRef，私有componentFactoryResolver:componentFactoryResolver）{}
ngOnInit（）：void{
这是loadComponents（）；
}
loadComponents（）{
对于（让索引=0；索引<2；索引++）{
常量组件工厂=
此.componentFactoryResolver.resolveComponentFactory（RatingCardComponent）；
const componentRef=this.vf.createComponent（componentFactory）；
const data={imgUrl:url[index]，title:titles[index]，rating:ratings[index]}；
componentRef.instance.data=数据；
}
}

信用卡.component.ts

import {Component, Input, OnInit, ComponentFactoryResolver, OnDestroy, ViewContainerRef, Type} from "@angular/core";
import { RatingCardComponent} from "../rating-card/rating-card.component"

let titles = ["Road to Perdition", "Cool Hand Luke"]
let ratings =  [7, 4];
@Component({
  selector: 'app-rating-list',
  template: '<ng-template appRatingHost></ng-template>'
})
export class RatingListComponent implements OnInit {

  constructor(private vf:ViewContainerRef, private componentFactoryResolver : ComponentFactoryResolver) {}

  ngOnInit(): void {
    this.loadComponents();
  }

  loadComponents() {

    for (let index = 0; index < 2; index++) {
      const componentFactory = 
 this.componentFactoryResolver.resolveComponentFactory(RatingCardComponent);

      const componentRef = this.vf.createComponent<RatingCardComponent>(componentFactory);

      const data = {imgUrl : urls[index], title : titles[index], rating : ratings[index]};

      componentRef.instance.data = data;
      
    }
  }

import { Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/core';


@Component({
  selector: 'app-rating-card',
  templateUrl: './rating-card.component.html',
  styleUrls: ['./rating-card.component.css']
})
export class RatingCardComponent implements OnInit {

  data : any;

  @ViewChild('#rating-header') rating_header? : ElementRef;

  constructor(private renderer : Renderer2, private el : ElementRef) { }



  ngOnInit(): void {
      
  }

  ngAfterViewInit()
  {
    this.setupRating(this.data.rating)
  }



  setupRating(size : Number) : void {
    for (let index = 0; index < size; index++) {
      let starContainer = this.renderer.createElement('span');
      let text = this.renderer.createText("&#9734;");
      
      this.renderer.addClass(starContainer, 'gold_full_star');
     
      this.renderer.appendChild(starContainer, text);

      const rating_header = this.renderer.selectRootElement("#rating-header", true);

      this.renderer.appendChild(rating_header, starContainer);
    }
  }

}

从“@angular/core”导入{Component，ElementRef，OnInit，renderr2，ViewChild}；
@组成部分({
选择器：“应用程序评级卡”，
templateUrl:'./rating card.component.html'，
StyleURL:['./rating card.component.css']
})
导出类评级卡组件在NIT上实现{
资料：有；
@ViewChild（“#评级标头”）评级_标头？：ElementRef；
构造函数（私有呈现器：Renderer2，私有el:ElementRef）{}
ngOnInit（）：void{
}
ngAfterViewInit（）
{
this.setupRating（this.data.rating）
}
setupRating（大小：编号）：无效{
for（让索引=0；索引

rating-card.component.html

<div class="card" tabindex="0">
        <img class="movieimg" height=96x width=96px alt="" src={{data.imgUrl}}/>
        <h3 class="card-title">{{data.title}}</h3>
        <h4 class="card-subtitle" id="rating-header">Rating:{{data.rating}}</h4>
        <p class="card-text">This is where I write my review ... ?</p>
    </div>

{{data.title}
评级：{data.Rating}
这是我写评论的地方

---

为什么不创建一个star-rating.component，并使用角度语法来处理带有*ngFor循环的stars，而不是处理底层dom结构？

为什么不创建一个star-rating.component，并使用角度语法来处理带有*ngFor循环的stars，而不是处理底层dom结构