0

Estoy haciendo una aplicación con angular y me he topado con un problema que no he podido solucionar. Tengo un método en mi componente que por el momento solo hace un console.log de un texto, el problema radica en que el método se ejecuta desde que inicio la aplicación, pero yo llamo el método en el evento click de un botón. Otro problema es que el método se ejecuta varias veces incluso sin yo presionar el botón.

No se a que de sebe esto ya que automáticamente la aplicación inicia empieza a ejecutarse el método de mi componente cuando este método debería ejecutarse cuando se presione el botón al cual esta encadenado.

Espero que alguien me ayude, muchas gracias de antemano.

Código de mi componente:

import { Component, OnInit, Input } from '@angular/core';
import { HomeService } from "../../Service/home.service";
import { SearchService } from "../../Service/search.service";
import { Dato } from '../../Models/array';

declare const $:any;

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css'],
  providers: [HomeService, SearchService]
})
export class CardComponent implements OnInit {
    constructor( private _peticion_home:HomeService ) {

    }
     
    ngOnInit(): void {

    }
}

capturar_id (array) {
    console.log("Prueba");

    /*
    let boton_id = 0;
    $('.lista').click(function() {
        boton_id = $(this).attr('id');
        
    });

    console.log(array[boton_id][4]);

    //colocar poster 
    document.getElementById('imagen-portada').setAttribute('src', array[boton_id[4]]);
    */
    }
}

Este es el código de mi plantilla:

<section class="general-section">

    <div class="row row-container col-md-12">
        <div class="card-container" *ngFor="let elemento of dato.dato_general; let i = index">
            <div class="card" style="width: 18rem;">
                <img class="poster" class="card-img-top img-fluid" src={{dato.dato_general[i][4]}}  alt="IMAGEN NO DISPONIBLE">
                <div class="card-body">
                  <h5 class="card-title">{{dato.dato_general[i][1]}}</h5>
                  <hr class="bg-light"/>
                  <p class="id_pelicula">ID: {{dato.dato_general[i][0]}}</p>
                  <a [click]="capturar_id(this.dato.dato_general)" [routerLink]="['/details']" id={{i}} class="btn btn-danger card-boton lista">Ver Detalles</a>
                </div> 
            </div>
        </div>
    </div>

</section>

Esto es lo que me arroja por consola:

Esta es la imagen del resultado

1 respuesta 1

2

Según veo tu código hay algunos errores en las llaves de cierre y el error mas importante es que estas utilizando el evento click de forma incorrecta:

1ra corrección (las llaves)

Es muy posible que el error se haya generado al pegar tu código en la pregunta, de todas formas debería quedarte algo así:

import { Component, OnInit, Input } from '@angular/core';
import { HomeService } from "../../Service/home.service";
import { SearchService } from "../../Service/search.service";
import { Dato } from '../../Models/array';

declare const $:any;

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css'],
  providers: [HomeService, SearchService]
})
export class CardComponent implements OnInit {
    constructor( private _peticion_home:HomeService ) {

    }
     
    ngOnInit(): void {

    }

    capturar_id (array) {
        console.log("Prueba");
    }
}

2da Corrección (llamada al método con el evento click)

Ahora bien veo que estas llamando al método utilizando [] cuando deberías usar () como bien puedes ver en la documentación en el apartado Tipos de enlace de datos que adjunto a continuación:

Tipos de enlaces de datos

Angular proporciona tres categorías de enlace de datos según la dirección del flujo de datos:

  • De la fuente para ver
  • De la vista a la fuente
  • En una secuencia bidireccional de vista a fuente para ver
    .
    .
    .

La puntuación unión de [], (), [()], y el prefijo especificar la dirección del flujo de datos.

  • Use [] para enlazar desde la fuente a la vista.
  • Use () para enlazar de la vista a la fuente.
  • Use [()] para enlazar en una secuencia de vista bidireccional a la fuente para ver.

Ahora bien lo que necesitas es cambiar [click] por (click) ya que como ves en la documentación para un evento se usa () como también puedes apreciar en el siguiente cuadro obtenido de la documentación:

Escribe Sintaxis Categoría
Estilo de clase de atributo de propiedad de interpolación {{expression}} [target]="expression" bind-target="expression" Unidireccional desde la fuente de datos para ver el destino
Evento (target)="statement" on-target="statement" Unidireccional desde el destino de la vista a la fuente de datos
Bidireccional [(target)]="expression" bindon-target="expression" Bidireccional

Tu HTML quedaría así:

<section class="general-section">

    <div class="row row-container col-md-12">
        <div class="card-container" *ngFor="let elemento of dato.dato_general; let i = index">
            <div class="card" style="width: 18rem;">
                <img class="poster" class="card-img-top img-fluid" src={{dato.dato_general[i][4]}}  alt="IMAGEN NO DISPONIBLE">
                <div class="card-body">
                  <h5 class="card-title">{{dato.dato_general[i][1]}}</h5>
                  <hr class="bg-light"/>
                  <p class="id_pelicula">ID: {{dato.dato_general[i][0]}}</p>
                  <a (click)="capturar_id(this.dato.dato_general)" [routerLink]="['/details']" id={{i}} class="btn btn-danger card-boton lista">Ver Detalles</a>
                </div> 
            </div>
        </div>
    </div>
</section>

Espero te sirva. Saludos ;)

1
  • Muchísimas gracias, me funciono. el 29 mar. 2021 a las 19:20

Tu Respuesta

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

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