Quiero cambiar el valor de los atributos según el index pero la página se queda en blanco
<div *ngIf="detallePost">
<div id="accordion" class="container">
<h2>{{ detallePost.title | uppercase }}</h2>
<div>
<span>id del Post : </span>{{detallePost.id}}
</div>
<div>
<span> {{ detallePost.body }}</span>
</div>
<ul>
<li *ngFor="let comment of commentsPost; let i = index">
<!-- Cabecera -->
<div class="card">
<div class="card-header" id="heading{{i}}">
<h5 class="mb-0">
<button class="btn btn-link"
data-toggle="collapse"
data-target="#collapse{{i}}"
aria-expanded="true"
aria-controls="collapse{{i}}">
{{comment.email}}
</button>
</h5>
</div>
<!--Final Cabecera-->
<!--Texto mostrado-->
<div id="collapse{{i}}"
class="collapse"
aria-labelledby="heading{{i}}"
data-parent="#accordion">
<div class="card-body">
{{comment.body}}
</div>
</div>
<!--Final Texto mostrado-->
</div>
</li>
</ul>
<button (click)="goBack()" class="btn btn-primary">Volver</button>
</div>
</div>
El error que da la consola es :
Uncaught Error: Template parse errors:
Can't bind to 'target' since it isn't a known property of 'button'. ("
<button class="btn btn-link"
data-toggle="collapse"
[ERROR ->]data-target="#collapse{{i}}"
aria-expanded="true"
aria-controls="collapse{{i}}">
"): ng:///AppModule/DetallePostComponent.html@17:9
Can't bind to 'aria-controls' since it isn't a known property of 'button'. ("
data-target="#collapse{{i}}"
aria-expanded="true"
[ERROR ->]aria-controls="collapse{{i}}">
{{comment.email}}
</button>
"): ng:///AppModule/DetallePostComponent.html@19:9
Can't bind to 'aria-labelledby' since it isn't a known property of 'div'. ("
<div id="collapse{{i}}"
class="collapse"
[ERROR ->]aria-labelledby="heading{{i}}"
data-parent="#accordion">
<div class="card-body">
"): ng:///AppModule/DetallePostComponent.html@28:7
at syntaxError (compiler.js:485)
at TemplateParser.parse (compiler.js:24668)
at JitCompiler._parseTemplate (compiler.js:34621)
at JitCompiler._compileTemplate (compiler.js:34596)
at eval (compiler.js:34497)
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:34497)
at eval (compiler.js:34367)
at Object.then (compiler.js:474)
at JitCompiler._compileModuleAndComponents (compiler.js:34
Los atributos que quiero modificar son :
id="heading{{i}}
data-target="#collapse{{i}}"
aria-controls="collapse{{i}}">
id="collapse{{i}}"
aria-labelledby="heading{{i}}"
Porque no quiero que se repitan, ya he comprobado que la {{i}}
tiene valores 0,1,2... etc