web-dev-qa-db-fra.com

Angular 5 clic lier à la balise d'ancrage

Je dois lier un événement de clic sur une ancre de mon modèle:

Mon html ressemble à ceci:

<a (click)="deleteUser(user)">
    <i class="la la-trash"></i>
</a>

user est une variable d'un précédent *ngFor="let user of users"

La fonction deleteUser() est déclarée sur mon fichier users.component.ts:

import { Component, OnInit, ViewEncapsulation, AfterViewInit } from '@angular/core';
import { Helpers } from '../../../../helpers';
import { ScriptLoaderService } from '../../../../_services/script-loader.service';

import { User } from '../../../../models/user';
import { UsersService } from '../../../../_services/users.service';

import swal from 'sweetalert';


@Component({
    selector: ".m-grid__item.m-grid__item--fluid.m-wrapper",
    templateUrl: "./users.component.html",
    styleUrls: ["./users.component.scss"],
    encapsulation: ViewEncapsulation.None,
})
export class UsersComponent implements OnInit, AfterViewInit {

    users: User[];

    constructor(
        private _script: ScriptLoaderService,
        private usersService: UsersService
    ) { }

    ngOnInit() {
        this.getUsers();
    }

    getUsers(): void {
        this.usersService.getUsers()
            .subscribe(users => this.users = users)
    }

    ngAfterViewInit() {
        this._script.load('.m-grid__item.m-grid__item--fluid.m-wrapper',
            'assets/app/js/users.js');
    }

    deleteUser(user: User): void {
        swal({
            title: `Eliminar usuario ${user.name}`,
            text: "Una vez eliminado, toda su información será eliminada!",
            icon: "warning",
            dangerMode: true,
          })
          .then((willDelete) => {
            if (willDelete) {
                this.usersService.deleteUser(user.id)
                    .subscribe(() => {
                        swal("Usuario eliminado", {
                            icon: "success",
                        });
                    });
            }
          });
    }

}

Cependant, cet événement de clic n'est jamais déclenché. Cela ne fait tout simplement rien. Aucune erreur, rien. J'ai essayé beaucoup de variations pour essayer de le faire fonctionner:

  • routerLink = ""
  • [routerLink] = ""
  • href = ""
  • href = "#"
  • href = "#!"
  • href = "! #"
  • Changer la balise <a> pour <div>, <span>, <div>, <button> mais aucune n'a fonctionné 

J'ai essayé ceci une autre question mais je pense que cela n'a pas fonctionné car il s'agit de Angular2 (j'utilise Angular 5).

Le modèle que j'utilise est Metronic (juste au cas où cela serait pertinent)

typescripteventsangular5
1
javierojeda

je faisais face au même problème et trouve la solution. Ajoutez simplement class = 'btn' pour que cela fonctionne correctement.

<a class ='btn' ><i (click)="deleteUser(user)" class="la la-trash"></i></a>
1
YOG_PHP

J'ai eu le même problème. Ma solution était:

<a href="" ><i (click)="deleteUser(user)" class="la la-trash"></i></a>

Lorsque vous n’avez pas de balise <i>, vous pouvez déformer le texte du lien dans <span>.

2
Thomas

(clic) devrait fonctionner pour les balises d'ancrage angulaires 5. Je l'ai essayé. Le code semble bien se passer pour moi sauf la douce alerte (je ne sais pas ce que c'est). 

Essayez d’ajouter un fichier console.log au début de la méthode et voyez si cela se trouve dans les elogs.

0
Josf