javascript - 更新在另一个对象中使用的对象

Question

我有一个允许您创建员工的应用程序，但我在重命名员工职位时遇到了问题。

我有一个位置数组，看起来像这样:

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

如果我创建一个员工，我必须从下拉列表中选择一个职位，员工最终看起来像这样:

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

在用户重命名位置之前，此方法工作正常。例如，如果用户将“Masseuse”重命名为“Massage Therapist”，职位下拉列表将按预期更新，但担任该职位的员工仍会说“Masseuse”。

如果用户重命名一个职位，我是否还需要找到每个担任该职位的员工并分别更新他们？或者我应该采取不同的方法吗？我想知道员工对象是否应该存储职位 ID，因为它永远不会改变，然后以某种方式使用它来显示他们的职位名称，但我不知道这将如何工作。

我还没有后端开发或数据库架构方面的经验，所以这可能不是重要的信息，但我目前只是在使用假的 REST API。我最终会设置一个实际的数据库，但还没有做到这一点。

FWIW，我正在使用 Angular 和以下模拟 API:https://github.com/typicode/json-server

Answer 1

您可以使用职位 ID 来存储标题。然后根据存储的位置id显示标题。

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

那么您的下拉菜单将如下所示

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

现在，当您显示员工时，您可以从存储的员工 titleId 中引用职位数组。

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

在你的组件中

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

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

引用这个工作stackblitz