angular - * ngIf中来自字符串动态变量的变量字段名称/属性名称

在我正在开发的Angular5应用程序中，我从dynamoddb中检索到一个类似于这样的JSON（它作为数组检索，并与*ngFor一起使用，但是对于这个问题的简单性，我可以说它是这样存储在组件中的”：

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中有没有办法做到这一点呢？

最佳答案

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

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

在上面的例子中，如果chosenPeriod是cc>，它将与：

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

这与：

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

什么，最终，具有相同的效果：

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