从角度6的多个嵌套HTML元素获取文本

Question

所以我试图使用JSPDF在for循环中打印部分文本。我的目标是在h5内获取{{service.title}}上的文字。并获取li内for循环内的所有列表。每当我单击触发器时，我都可以获得所有元素的引用。并且适用于单个点击。

模板

<div #refEl class="card mt-3 mt-b3">
    <div class="card-header" id="{{'heading' + i}}">
      <h5 class="mb-0">
        <button #title class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse' + i" [attr.aria-expanded]="'false'" [attr.aria-controls]="'collapse' + i">
          <i class="mdi mdi-arrow-down mdi-24px"></i>

          {{service.title}}
        </button>
      </h5>
      <i (click)="printPDF(refEl, title, content)" class="print mdi mdi-printer mdi-24px"></i>
    </div>


    <div id="{{'collapse' + i}}" class="collapse" [attr.aria-labelledby]="'heading' + i" data-parent="#accordion">
      <div id="{{'snapshot' + i}}" class="card-body">

        <ul #content class="list-group">
          <li  *ngFor="let req of service.requirements" class="list-group-item">{{req}}</li>

        </ul>

      </div>
    </div>

  </div>

ts

import { Component, OnInit } from '@angular/core';
import { GovServicesService } from '../gov-services.service';
import * as jspdf from 'jspdf';

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



  services:any;

  constructor(private govService:GovServicesService) { }

  ngOnInit() {
    this.services = this.getServicesInfo();
  }

  getServicesInfo(){
    return this.govService.getInfo();
  }

  printPDF(element, title, content){
    console.log('printing...');
    console.log(element);
    console.log(title);
    console.log(content.innerHTML);

    let doc = new jsPDF();
    doc.text()

  }

} 

这是我在单击控制台时在控制台上看到的内容

console result