0
votes

Lorsque je récupère des données de l'API mais que cela s'affiche en tant qu'objet dans Angular

Lorsque je récupère les données de l'API, les valeurs "firstname" et "lastname" s'affichent. Mais la valeur "jobTitle" n'apparaît pas dans le tableau mais elle apparaît sous forme de tableau dans la boîte de console. Aidez-moi à résoudre ça

Voici le fichier visibilité.ts :

export interface IEmployee {
    userId: any;
    firstName: string;
    jobTitle: any;
    lastName: String;
}

Voici le fichier HTML

<div>
          <cdk-virtual-scroll-viewport itemSize="50" class="dialogbox-viewport">
            <table class="table table-light" style="border: 1px solid">
              <thead style="background-color: aqua">
                <tr>
                  <th>Select</th>
                  <th>Name</th>
                  <th>Role</th>
                </tr>
              </thead>

              <tbody>
                <tr *ngFor="let p of pmDetails1">
                  <td>
                    <input type="checkbox" value="{{p.firstName}}" (change) = "onSelectedEmployee($event)" [checked]="check" /> 
                  </td>
                  <td>{{ p.firstName }} {{ p.lastName }}</td>
                  <td>{{ p.jobTitle }}</td>
                </tr>
              </tbody>
            </table>
          </cdk-virtual-scroll-viewport>
        </div>

Voici le fichier IEmployee.ts

export class VisibilityComponent implements OnInit {
  pmDetails1: IEmployee[];

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getAllUsers().subscribe((pmDetails1: IEmployee[]) => {
      this.pmDetails1 = pmDetails1;
       console.log(pmDetails1);
       console.log(pmDetails1[0].jobTitle);
    });
  }
}

Voici la sortie:

! [entrez la description de l'image ici] [1]

Voici le "console.log (pmDetails1)"

! [entrez la description de l'image ici] [2]

Voici le "console.log (pmDetails [0] .jobTitles)"

entrez la description de l'image ici

Je souhaite afficher jobTitlesName dans la colonne Role du tableau. Je suis un débutant à Angular. S'il vous plaît aidez-moi à faire

javascript typescript angular

1 commentaires

Qui crée cet objet dans le backend? selon vos images, jobTitles n'est pas un tableau, mais un objet avec plusieurs propriétés qui lui sont propres. Alors, comment voulez-vous stringifier cet objet pour votre vue?

3 Réponses :

0
votes

essaye ça :

export class VisibilityComponent implements OnInit {
  pmDetails1: IEmployee[];
  constructor(private userService: UserService) {}
  ngOnInit() {
    this.userService.getAllUsers().subscribe(data => {
      this.pmDetails1 = data;
       console.log(pmDetails1);
       console.log(pmDetails1[0].jobTitle);
    });
  }
}

3 commentaires

quelle? Pourquoi? Ce n'est pas parce que vous appelez une carotte une banane que cela change ce que c'est.

Il y a une erreur

en HTML <td>{{p.jobTitle.jobTitleName}}</td>

1
votes

Utilisez ceci dans votre fichier HTML.

<td>{{ p.jobTitle.jobTitleName }}</td>

0 commentaires

1
votes

Tout dans votre code est correct, le seul problème est que la propriété jobTitle est un Object

Vous avez 3 options disponibles (ou plus)

Option 1

Renvoie la valeur sous forme de chaîne depuis le backend; Cela signifie que nous pouvons modifier votre interface pour

    import { map } from 'rxjs/operators';
    export class VisibilityComponent implements OnInit {
      pmDetails1: IEmployee[];

      constructor(private userService: UserService) {}

      ngOnInit() {
        this.userService.getAllUsers().pipe(
           map(employeea => employees.map(
              (employee) => ({...employee, jobTitle: jobTitle.jobTitleName })
           ))
        ).subscribe((pmDetails1: IEmployee[]) => {
          this.pmDetails1 = pmDetails1;
           console.log(pmDetails1);
           console.log(pmDetails1[0].jobTitle);
        });
      }
    }

Option 2

Modifier l'interface pour refléter l' Object du backend

<td>{{ p.jobTitle.jobTitleName }}</td>

Dans votre html, vous pouvez maintenant l'utiliser comme ci-dessous. Cette approche a été énoncée par @shehanpathirathna

    export interface IEmployee {
        userId: any;
        firstName: string;
        jobTitle: { jobTitleName: string; jobTitleId: number };
        lastName: String;

    }

Option 3

Utilisez la map pour produire un nouvel objet avec la structure souhaitée

    export interface IEmployee {
        userId: any;
        firstName: string;
        jobTitle: string;
        lastName: String;

    }

Cette option est probablement excessive pour cette situation spécifique, mais peut être très utile si l'objet devient plus complexe

2 commentaires

J'écrivais également la même réponse, mais Owen Kelvin l'a postée devant moi. C'est la solution parfaite pour ce problème auquel vous êtes confronté.

Merci @YisalKhan