Angular 8/9 如何获取具有相同class 名称的多个元素的innerHTML？

Question

我有一个 div，它将根据名为 totalQuestionsList 的变量的长度创建任意多次。我想 select 每个 div.

中所有 <h5> 元素的 innerHTML

<div *ngFor="let item of totalQuestionsList; let i = index">
  <h5 class="question-num">Question #{{i+1}}</h5>
</div>

我该怎么做？任何帮助表示赞赏。

Answer 1

在ts文件中。将 ElemementRef 注入构造函数

在那class上面有一个nativeElement.innerHtml属性

用它来获取您的内容

Answer 2

您可以使用引用变量并使用 ViewChildren

<div *ngFor="let item of totalQuestionsList; let i = index">
  <h5 #h class="question-num">Question #{{i+1}}</h5>
</div>

@ViewChildren('h') elements:QueryList<ElementRef>

您还可以使用带选择器的指令 class

@Directive({
    selector:'.question-num'
})
export class QuestionDirective{
     constructor(public elementRef:ElementRef){}
}

并使用

 @ViewChildren(QuestionDirective) elements:QueryList<QuestionDirective> 
 //e.g. console.log(elements.first.elementRef)

Angular 8/9 如何获取具有相同class 名称的多个元素的innerHTML？

Angular 8/9 How do I get the innerHTML of multiple elements with the same class name?

html

javascript

angular

angular8

angular9