J'ai une application qui vous permet de créer des employés, mais j'ai un problème lors du changement de nom des postes d'employés.

J'ai un tableau de positions qui ressemble à ceci:

positions: [
  { id: 1, title: 'Masseuse' },
  ...
];

Si je crée un employé, je dois sélectionner un poste dans une liste déroulante et les employés finissent par ressembler à ceci:

employees: [
  { id: 1, name: 'John Doe', title: 'Masseuse' },
  ...
];

Cette approche fonctionne correctement jusqu'à ce que l'utilisateur renomme une position. Par exemple, si l'utilisateur renomme «Masseuse» en «Massothérapeute», la liste déroulante du poste sera mise à jour comme prévu, mais les employés ayant ce poste diront toujours «Masseuse».

Si un utilisateur renomme un poste, dois-je également trouver chaque employé avec ce poste et les mettre à jour individuellement? Ou existe-t-il une approche différente que je devrais adopter? Je me demande si l'objet employé devrait stocker l'ID de poste car cela ne changera jamais et ensuite l'utiliser pour afficher son titre de poste, mais je ne sais pas comment cela fonctionnerait.

Je ne suis pas encore expérimenté avec le développement backend ou l'architecture de base de données, donc ce ne sont peut-être pas des informations importantes, mais j'utilise uniquement une fausse API REST pour le moment. Je finirai par configurer une base de données réelle, mais je n'y suis pas encore arrivé.

FWIW, j'utilise Angular et l'API fictive suivante: https://github.com/typicode/json -serveur

1
Brett 27 janv. 2019 à 05:05

3 réponses

Meilleure réponse

Vous pouvez utiliser l'identifiant de position pour stocker le titre. Et puis affichez le titre par l'identifiant de position stocké.

employees: [
 { id: 1, name: 'John Doe', titleId: 1 },
 ...
];

Ensuite, votre liste déroulante serait comme ci-dessous

<select [(ngModel)]="editingEmployee.titleId"">
  <option *ngFor="let x of positions" [value]="x.id">{{x.title}}</option>
</select>

Et maintenant, lorsque vous affichez un employé, vous pouvez vous référer au tableau de positions à partir du titleId stocké de l'employé.

<div *ngFor="let employee of employees">
   {{employee.name}} is a {{getPosition(employee.titleId)}}
</div>

Et dans votre composant

getPosition(titleId) {
  const position = this.positions.filter(p => p.id === titleId);

  return position[0] ? position[0].title : '';
}

Reportez-vous à ce stackblitz fonctionnel.

1
Senal 27 janv. 2019 à 02:49

Joli raisonnement.

Ce que vous pensez, c'est la bonne façon de procéder.

Cela correspond au concept de normalisation de la base de données qui est un moyen structuré de réduire la redondance dans votre architecture.

Voir également normalisation de la base de données dans wikipedia: lien

1
Alexandros Panagiotakis 27 janv. 2019 à 02:19

Une solution possible sera de stocker un identifiant de position au lieu du titre dans l'objet employé.

Et quand vous devez l'afficher, vous pouvez construire une "vue" de cet objet:

let positions = [
  { id: 1, title: 'Masseuse' },
  ...
];

let employees = [
  { id: 1, name: 'John Doe', positionId: 1 },
  ...
];

function getPositionTittle(id, positions) {
  const position = positions.find(p => p.id === id);

  if (!position) return '';

  return position.title;
}

function prepare(employee, positions) {
  const title = getPositionTittle(employee.positionId, positions);
  return {
    ...employee,
    title
  };
}

const employeeView = prepare(employees[0], positions);
// employeeView = { id: 1, name: 'John Doe', positionId: 1, title: 'Masseuse' }

1
quadreex 27 janv. 2019 à 02:27