2

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

1 respuesta 1

4

Angular distingue entre atributos y propiedades. Generalmente, cuando pones un atributo a una etiqueta en una plantilla de Angular, asume que es una propiedad nativa de HTML, una propiedad del componente "dueño" de la plantilla o una directiva. Si no puede asociarlo con nada de eso, falla.

Entonces, ¿cómo se pueden añadir atributos que no son propiedades?, como los data-*? De la siguiente manera:

<button class="btn btn-link" 
  attr.data-toggle="collapse"
  attr.data-target="#collapse{{i}}"
  attr.aria-expanded="true"
  attr.aria-controls="collapse{{i}}">
  {{comment.email}}
</button>

Es decir, añadiendo un attr. delante, para indicar a angular que son atributos puros.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.