0

我有看起来像这样的数据

plans:[
  {
    "planName": "PlanA",
    "planCode": "PLN001"
  },
  { 
    "planName": "PlanB",
    "planCode": "PLN002"
  },
  {
    "planName": "PlanC",
    "planCode": "PLN003"
  }
]

我需要在 UI HTML 中显示，如下所示

<p> User 1 is enrolled in PlanA , PlanB , PLanC </p>

问题1：如何从计划数组中获取值以在一个语句中用逗号显示如上。

问题 2：我需要为问题 1 语句的每个计划提供一个超链接，该语句将根据计划代码转到不同的组件。

<a href="#{planCode}_details">{{PlanName}}</a>

超链接必须采用的其他组件具有它的 id

id="{{p.planCode}}_details"

任何帮助表示赞赏

这是我到目前为止所尝试的。

<p *ngIf="plans?.length > 0">{{UserName}} has a balance in the {{plans.planName.join(', ')}} .</p>
4

2 回答 2

1

问题 1

var plans = [ { "planName": "PlanA", "planCode": "PLN001" }, { "planName": "PlanB", "planCode": "PLN002" }, { "planName": "PlanC", "planCode": "PLN003" }]

var result = (plans.map(plan => plan.planName)).reduce((acc, curr) => acc + ', ' + curr)

console.log(result);
您可以尝试以下方法来获取所有planName属性的逗号分隔字符串。

planNames: string;

this.planNames = (plans.map(plan => plan.planName)).reduce((acc, curr) => acc + ', ' + curr);

并使用它的模板

<p> User 1 is enrolled in {{ planNames }} </p>

问题2

href您可以使用数据绑定表示法或插值将成员变量绑定到属性。

<ng-container *ngFor="let plan of plans">
  <a href="#{{ plan?.planCode }}_details">{{ plan?.PlanName }}</a>
</ng-container>

更新

我不确定您到底在追求什么，但是要将这两个问题结合起来，您可以执行以下操作

<p>User 1 is enrolled in 
  <ng-container *ngFor="let plan of plans; let last=last">
    <a href="#{{ plan?.planCode }}_details">{{ plan?.PlanName }}</a>
    <ng-container *ngIf="!last">
      ,&nbsp;
    </ng-container>
  </ng-container>
</p>

在这种情况下，您不需要附加变量planNames。

于 2020-06-03T17:49:00.387 回答
0

也许是这样：

<p> User 1 is enrolled in 
  <a *ngFor="let plan of plans" href="#{{plan.planCode}}_details">{{plan.PlanName}}</a>
</p>
于 2020-06-03T18:23:00.870 回答