Question

在我正在处理的angular 5应用程序中，我从dynamodDB中检索一个看起来像这样的json（它作为一个数组重新运行并与*ngFor一起使用，但是为了简化这个问题我可以说它存储在组件＆＃34;：

中

public person = {
  "userID" : "abc123...",
  ...
  "period1_status" : "applied",
  "period2_status" : "placed",
  "period3_status" : "applied",
  ...
}

在我的组件中，我有一个名为chosenPeriod的变量字符串，我可以使用<select>标记进行更改。它已更改为'period1'，'period2'或'period3'。

public chosenPeriod = 'period2'

在组件的html的其他部分中我有一个<mat-chip>（使用material2），我只想显示periodX_status是否等于'applied'，其中X是值chosenPeriod。像这样的事情：

<mat-chip *ngIf="person.chosenPeriod+'_status' == 'applied'"><mat-icon>drag_handle</mat-icon></mat-chip>

如果*ngIf="person.period1_status == 'applied'等等，我希望它为chosenPeriod = 'period1'。

上面的例子当然不起作用。但是在angular5 / HTML中有没有办法做到这一点？

Answer 1

您可以使用object property accessors/bracket notation，如下所示：

<mat-chip *ngIf="person[chosenPeriod + '_status'] == 'applied'">

在上面的示例中，如果chosenPeriod为'period1'，则与以下内容相同：

<mat-chip *ngIf="person['period1' + '_status'] == 'applied'">

与以下内容相同：

<mat-chip *ngIf="person['period1_status'] == 'applied'">

最终，具有相同的效果：

<mat-chip *ngIf="person.period1_status == 'applied'">

来自* ngIf

1 个答案: