将 angular 中的值替换为 ngif 或其他

Question

我有一个正在返回任务的 GET 请求：

"tasks": [
    {
      "partner_id": 1,
      "title": "aa",
      "description": "dddd",
      "priority": "High",
    }]

我还有另一个代表合作伙伴价值观的 GET 请求。

"partners": [
    {
      "id": 1,
      "value": "str"
    }]

在实现视图并对任务执行 ngfor 时，我想将 task.partner_id 替换为合作伙伴的真实姓名。

//getting the id of the task.partner_id and represent the partner.value
<span><span class="bold">For</span> {{task.partner_id}}</span>

而不是 1 是等同于 id:1 的合作伙伴名称。

如何在不处理来自 API 的请求的情况下执行此操作？

更新：我使用了@errorau 和@Clint

建议的解决方案


getParentValue(parents, parentId) {
  return Object.keys(parents).find(key => parents[key] === parentId);
}

它运行良好，我在前端呈现正确的值。但现在我收到一个错误：

Answer 1

在html

<span><span class="bold">For</span> {{getPartnerValue(task.partner_id)}}</span>

在 component.ts 文件中

getPartnerValue(id){
 return this.partners.filter(partner => +partner.id === +id)[0].value;
}

Answer 2

你不能操纵你的api你可以写一个基本的函数来获取父值，比如

<span><span class="bold">For</span> {{getTask(task.partner_id)}}</span>

你可以这样写这个函数

  function getTask(id){
    return partners.find((p) => p.id === id).value
}

Answer 3

您可以在组件文件中构建将它们结合起来的视图模型。

component.ts

ngOnInit() {
const tasks = [
  {
    partner_id: 1,
    title: 'aa',
    description: 'dddd',
    priority: 'High',
  },
];

const partners = [
  {
    id: 1,
    value: 'str',
  },
];

// build the view model that combine both data
this.models = tasks.reduce((prev, task) => {
  const matchedPartner = partners.find(
    (partner) => partner.id === task.partner_id
  );

  return prev.concat({
    ...task,
    partner_name: matchedPartner ? matchedPartner.value : '', // add a new field to store partner name, if not found, default to empty string
  });
}, []);
}

component.html

<div *ngFor="let model of models">
    <h1>{{ model.partner_name }}</h1>
</div>

实例：https://stackblitz.com/edit/angular-65305553?file=src/app/app.component.ts

将 angular 中的值替换为 ngif 或其他

Replace values in angular with ngif or other

javascript

angular

loops

ngfor

angular-ng-if