如何为 Angular 中数组的值创建超链接 8

Question

我有这样的数据

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：如何从 plans 数组中获取值，并在一条语句中像上面那样用逗号显示。

问题 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>

Answer 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。

Answer 2

也许是这样：

<p> User 1 is enrolled in 
  <a *ngFor="let plan of plans" href="#{{plan.planCode}}_details">{{plan.PlanName}}</a>
</p>

如何为 Angular 中数组的值创建超链接 8

how to create a hyperlink for values from an array in Angular 8

angular

angular-arrays

angular8

问题 1

问题 2

更新