Question

有两个列表如下。

article = [
  {
  "id": 600,
  "components": [
    {
      "kind": "text",
      "text": "texttext",
    },
    {
      "kind": "title",
      "text": "titletile",
    },
  ]
  "categories": [
    {
      "id": 26,
      "name": "restaurant",
    },
    {
      "id": 51,
      "name": "special",
    }
  ],
  }
];

categoryLists = [
 "children" : [
  {
    "id": 19,
    "name": "extreme"
  },
  {
    "id": 31,
    "name": "series"
  },
  {
    "id": 51,
    "name": "special"
  },
 ]
];

我希望在category.name中存在article.categories和category.id时使用ngIf显示categoryLists.children。

我在模板中实现了如下。

<div *ngFor="let category of article.categories">
  <p *ngIf="categoryLists.children.some(e => e.id === category.id)">{{ category.name }}</p>
</div>

但是，发生了以下错误。

Error: Template parse errors:
Parser Error: Bindings cannot contain assignments

为什么会这样？某些（）有问题吗？
以下处理没有问题，因此阵列应该没有问题。

<div *ngFor="let child in categoryLists.children">
  <p>{{ child.name }}</p>
</div>
<div *ngFor="let category in article.categories">
  <p>{{ category.name }}</p>
</div>

Answer 1

@RahulSingh是对的，你可以将你的语句包装在ts文件中：

function foo(categoryId: number): boolean {
    return categoryLists.children.some(e => e.id === categoryId)
}

然后在html模板中调用它：

<p *ngIf="foo(category.id)">{{ category.name }}</p>

Answer 2

由于箭头函数必须返回e.id === category.id的计算值，请将其保留在括号中，如下面的代码所示。否则，它首先检查e => e.id这不是必需的行为。

<div *ngFor="let category of article.categories">
  <p *ngIf="categoryLists.children.some(e => (e.id === category.id))">{{ category.name }}</p>
</div>

一切顺利。

在* ngIf中使用some（）时发生错误

2 个答案: