我正在尝试评估来自另一个组件内部的一个组件的表达式。
下面是代码
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"]
评估哪一列
请忽略我的修改,我仍在学习如何更好地编写问题。
最佳答案
您可以从该属性创建一个函数
parentGridData = {
...
url: element => `http://www.google.com/searchText=${element["name"]}`
};
然后传递一个合适的参数给它:
<a href="{{gridData?.url(element)}}">
但请确保您的函数不包含繁重的计算。
关于html - 以 Angular 评估表达式两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56604463/