5
respostas

Botão sendo disparado sem ser clicado - Angular 2

Olá, eu possuo um botão que realiza um POST em um serviço JSON. Mas, o mesmo está sendo disparado antes mesmo de ser clicado, somente recarregando a página ele já é disparado. Segue abaixo o botão:

<button type="submit" class="btn btn-primary" (click)="postMail(user.id)">
                   Reenviar email de boas-vindas
</button>

Ele está dentro de uma li, pois desejo que ele apareça após os dados de cada usuário. Aguardo ajuda

5 respostas

Abner, poderia compartilhar um trecho maior do seu código via Github? não consegui identificar o problema a ponto de conseguir ti passar uma solução :)

Por algum motivo não consegui colocar o Git aqui. Vou quebrar o código:

List.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Resource } from '../resource';
import { UserService } from './user.service';
import { UserModel } from './user.model';
import { User } from './object';
import { TranslateService } from 'ng2-translate';
import 'rxjs/add/operator/map'
import 'rxjs/Rx';

@Component({
    selector: 'app-root',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.css'],
    providers: [UserService],

})

export class ListComponent implements OnInit {

    mensagem: string = '';

    @Input()
    title = 'AngularEstudo';
    user = new UserModel();
    users: User[];
    id: string;

    ngOnInit() {
        this.getUsers();
        this.postMail(this.id);
    }

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

    postMail(id) {
        this.userService.postMail(id)
            .subscribe(
                () => {
                this.mensagem = 'Email de boas-vindas reenviado com sucesso';
            },
            erro => {
                console.log(erro);
                this.mensagem = 'Não foi possível reenviar o email';
            })
    }

    constructor (private userService: UserService, private translate: TranslateService) { 
            translate.setDefaultLang('translateServices');
            translate.use('translateServices');
    }
}

List.component.html:

<div class="container mt-5">
    <p *ngIf="mensagem.length" class="alert alert-info">{{mensagem}}</p> 
    <div class="row">
        <div class="col-md-6 ml-md-auto mr-md-auto mb-5">
            <ul class="list-group" *ngIf="users !== undefined && users.length > 0">
                <li class="list-group-item" *ngFor="let user of users">
                    <b>Nome:</b> {{ user.name }} <br> 
                    <b>Email:</b> {{ user.mail }} <br> 
                    <b>Serviços prestados:</b>
                    <ul>
                        <li *ngFor="let service of user.serviceTypes" >{{ service.toString() | translate}}</li>
                    </ul>
                    <b>Estados de atuação:</b> {{ user.states }} <br>
                    <b>País do cadastro:</b> {{ user.country }} <br>
                    <b>Status:</b><span *ngIf="user.onDuty"> OnDuty</span> <span *ngIf="!user.onDuty"> OffDuty</span> <br>
                    <br>
                    <div>
                        <button #welcome class="btn btn-primary" (click)="postMail(user.id)">
                            Reenviar email de boas-vindas
                        </button>
                    </div>
                </li>
            </ul>
            <ul class="list-group" *ngIf="!users || users.length == 0">
                <li class="list-group-item">
                    Nenhum usuário encontrado!
                </li>
            </ul>
        </div>
    </div>
</div>

User.service.ts:

import { Injectable } from '@angular/core';
import { User } from './object';
import { HttpModule, Http, Headers, Response, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import { HttpUtilService } from '../http-util-service';
import { UserComponent } from './user.component';


@Injectable()
export class UserService {

    //private token = 'Xz6IC1]U`AA60sN7R2xRc915c6fve62b:a77542{ji2uRZ+pG0&72gX+Y.z40MK';
    private usersUrl = 'http://192.168.0.199:9100/backoffice/v1/provider/';
    private urlMail = 'http://192.168.0.199:9100/backoffice/v1/provider/resend/welcome/';
    /*private headers = new Headers({ 'Content-Type': 'application/json', 'X-AUTH-APPLICATION-TOKEN': this.token });
    private options = new RequestOptions({ headers: this.headers, withCredentials: false });*/

    private path = 'users';

    constructor(private http: Http, private httpUtil: HttpUtilService) {  }

    getUsers(): Observable<User[]> {
        const url = this.usersUrl + 'all';
        return this.http.get(url)
                        .map(this.httpUtil.extractData)
                        .catch(this.httpUtil.handleError)
    }

    postMail(id) {
        const url = 'http://192.168.0.199:9100/backoffice/v1/provider/resend/welcome/' + id;
        return this.http
            .post(url, id)
            .catch(this.httpUtil.handleError);
    }
}

O problema é que quando a página é recarregada o botão é acionado automaticamente, sem ser clicado.. E com isso retorna um erro de undefined, porque o id não definido, somente é quando clicado o botão.