以角度评估表达式两次答案

【问题标题】：Evaluate expression twice in angular以角度评估表达式两次
【发布时间】：2019-06-14 20:02:09
【问题描述】：

我正在尝试评估来自另一个组件中的一个组件的表达式。

下面是代码

Parent.component.ts

parentData: any= {
    name: 'xyz',
    url: '/test?testid={{element["TestId"]}}'
};

Parent.component.html

<child [data]="parentData"></child>

child.component.ts

@Component({ 
selector:'child'
...
})
export class ChildComponent {
    @Input() data: any;
}

child.component.html

<td mat-cell *matCellDef="let element">
    <a href="{{data.url}}">{{element["TestName"]}}</a>
</td>

href 被评估为/test?testid={{element["TestId"]}}。需要的是/test?testid=123

element["TestId"] - is to be evaluated in child scope.

我找到了这个link，但我不确定如何在我的情况下应用它。

编辑： 为StackBlitz 添加链接包含类似的示例。我正在尝试使我的 ChildComponent 通用，这就是为什么要让父母决定评估哪一列 element["TestId"] 请忽略我的编辑，我仍在学习如何更好地编写问题。

【问题讨论】：

【解决方案1】：

您可以从该属性中创建一个函数

parentGridData = {
  ...
  url: element => `http://www.google.com/searchText=${element["name"]}`
};

然后将适当的参数传递给它：

<a href="{{gridData?.url(element)}}">

但请确保您的函数不包含繁重的计算。

【讨论】：