ng if to select field value select option

Asked

Viewed 403 times

0

I have this code in angular:

<div class="form-group">
      <label for="sexo">Sexo</label>
      <select type="text" class="form-control" id="emailId" required [(ngModel)]="user.sexo" name="sexo">
          <option value="1">Masculino</option>
          <option value="2">Feminino</option>
        </select>
    </div>

I need to display in html the male and female values, however only appear 1 and 2.

Code listing

 <div class="panel-body" >
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Nome</th>
            <th>Email</th>
            <th>Sexo</th>
            <th>CPF</th>
            <th>Nacionalidade</th>
            <th>Naturalidade</th>
            <th>Nascimento</th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let user of users | async">
            <td>{{user.nome}}</td>
            <td>{{user.email}}</td>
            <td>{{user.sexo}}</td>
            <td>{{user.cpf}}</td>
            <td>{{user.nacionalidade}}</td>
            <td>{{user.naturalidade}}</td>
            <td>{{user.dataNascimento}}</td>
            <td>
                <button (click)="deleteUser(user.id)" class="btn btn-danger">Delete</button>
            </td>
            <td>   
                <button (click)="userUpdate(user.id)" class="btn btn-info" style="margin-left: 10px">Alterar</button>
            </td>
          </tr>
        </tbody>
angular

1 answer

0


Just add the lines

<td *ngIf="user.sexo==1">Masculino</td>
<td *ngIf="user.sexo==2">Feminino</td>

Stayed like this:

<div class="panel panel-primary">
    <div class="panel-heading">
      <h2>Listar Usuários</h2>
    </div>
    <div class="panel-body" >
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Nome</th>
            <th>Email</th>
            <th>Sexo</th>
            <th>CPF</th>
            <th>Nacionalidade</th>
            <th>Naturalidade</th>
            <th>Nascimento</th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let user of users | async">
            <td>{{user.nome}}</td>
            <td>{{user.email}}</td>
            <td *ngIf="user.sexo==1">Masculino</td>
            <td *ngIf="user.sexo==2">Feminino</td>
            <td>{{user.cpf}}</td>
            <td>{{user.nacionalidade}}</td>
            <td>{{user.naturalidade}}</td>
            <td>{{user.dataNascimento}}</td>
            <td>
                <button (click)="deleteUser(user.id)" class="btn btn-danger">Delete</button>
            </td>
            <td>   
                <button (click)="userUpdate(user.id)" class="btn btn-info" style="margin-left: 10px">Alterar</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.